IDN - HTML Email tab supports

We have a problem to include an email tab in a template to avoid multiple email template based on the conditions.

But unfortunately it is not working. would like to check if any one enabled a tab using HTML. if so , can i know the way it was done.

For your reference have included the html version and link

<style>
/* hide radio element */
.myradio {
  display: none;
  height: 0px;
  visibility: hidden;
}
.mybox {
 width: 100px;
 height: 50px;
 background-color: #eeeeee;
 display: none;
 padding: 5px;
}
/* change tab to bold */
.myradio:checked + label {
  font-weight: bold;
} 
/* show content */
#radio1:checked ~ .box1,
#radio2:checked ~ .box2
{
  display: block;
}
</style>
 
<input name="myradio" type=radio id="radio1" class="myradio" checked>
<label for="radio1">Tab 1</label> | 
<input name="myradio" type=radio id="radio2" class="myradio">
<label for="radio2">Tab 2</label>
 
<div class="mybox box1">Box 1</div>
<div class="mybox box2">Box 2</div>

Per the documentation, it looks like comments aren’t supported.

Try removing the comments.

Based on my experience, many email provider igonre styles also. you must use inline css :

<input name="myradio" type="radio" id="radio1" style="display: none; height: 0; visibility: hidden;" checked>
<label for="radio1" style="font-weight: normal;">Tab 1</label> | 
<input name="myradio" type="radio" id="radio2" style="display: none; height: 0; visibility: hidden;">
<label for="radio2" style="font-weight: normal;">Tab 2</label>

<div class="mybox box1" style="width: 100px; height: 50px; background-color: #eeeeee; display: none; padding: 5px;">Box 1</div>
<div class="mybox box2" style="width: 100px; height: 50px; background-color: #eeeeee; display: none; padding: 5px;">Box 2</div>

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.