Update: As of October 2016, Gmail dropped support for the :checked selector and hence this technique no longer works in Gmail.

Wouldn’t it be cool if you could create interactive tabs that work in email? Well here’s a technique to create tabs that work in the iOS, Yahoo! Mail and AOL Mail.

Radio inputs, labels and the :checked pseudo-class

Creating completely CSS driven tabs isn’t new. If you google “CSS Tabs” you can find examples of tabs that are built with CSS. Unfortunately these techniques don’t stand up to the ravages of Webmail’s CSS processors.

Many of the examples use a combination of the radio input, labels and the :checked CSS3 pseudo-class.

Here is an example of how this principle works:

<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>

The tab titles are wrapped within labels and placed after an associated radio input element which are styled to be hidden. The tab titles then refer to the associated radio input using the “for” attribute so that clicking on the label activates the radio input with an id matching the value in the “for” attribute. That is the beauty of using radio and checkboxes and labels. We can activate any checkbox or radio element anywhere on the page by just referencing the id of the input in the “for” attribute of the label.

Then using the :checked pseudo class and adjacent (+) and general (~) sibling selectors, we can selectively bold the title and display the associated tabbed content.

This fairly simple technique works on mobile and webkit based clients such as iOS and Android but in order to make it work for Webmail – we need more tricks!

Getting it to work in Webmail.

The problem with Webmail is that we can’t use certain CSS styles.

Yahoo! Mail strips the general sibling selector (~) as well as renders the “for” attribute useless since it renames ids and classes but not the “for” attribute. Gmail, as we know strips classes and ids which also prevents us from using the for attribute. Outlook.com doesn’t support the CSS3 :checked pseudo class.

We can support Yahoo! Mail and Gmail using three tricks:

1) We place both the radio element and the tab content within the label. The reason for this is so we don’t have to use the “for” attribute. Clicking a label automatically activates the radio element nested within.

2) We nest labels, inputs and tab contents within each other like a set of Russian Matryoshka dolls. The reason we do this is so that we can leverage just the adjacent sibling selector (+) which requires that the activated and targeted elements be adjacent to each other – in this case the radio input and the span wrapper.

<label><input type=radio name="tab" id="tab1" checked>
<span><div class="title1">Tab 1</div>

    <!-- NESTED TAB 2 -->
    <label><input type=radio name="tab" id="tab2">
    <span><div class="title2">Tab 2</div>

        <!-- NESTED TAB 3 -->
        <label><input type=radio name="tab" id="tab3">
        <span><div class="title3">Tab 3</div>

        <div class="content3">
        Tab 3 Content
        </div></span>
        </label>
        <!-- /NESTED TAB 3 -->

    <div class="content2">
    Tab 2 Content
    </div></span>
    </label>
    <!-- /NESTED TAB 2 -->

<div class="content1">
Tab 1 Content
</div></span>
</label>

Fallback on non supported clients.

Finally we need to ensure that non supported clients (Outlook, Outlook.com, Gmail) don’t see a broken email. There are a few strategies to deal with this. The simplest solution is to completely hide all the tabbed content in non supported clients and that includes wrapping the tabbed content in Outlook conditional comments (You didn’t seriously expect this would work in the Outlook desktop client, did you?).

One way to hide tabbed content on clients that don’t support the :checked pseudoclass, we wrap the tabbed content with a div container and hide it, then put a checked radio input before the div and in the style block add a selector using the :checked pseudo-class to display the div container if the selector is matched.

<style>
.tabcheck:checked + div
{
  display:block !important;
  max-height: none !important;
  height: auto !important;
}
</style>

<input type=radio class="tabcheck" style="display:none !important;" checked>
<div style="height:0px;max-height:0px;overflow:hidden;">
TABBED CONTENT
</div>

Having all the content completely hidden is not ideal and a simple solution is to move Tab 1’s content outside the nested tabs and have it display by default but wrap all the content within a fixed height div with an overflow of hidden. This way, when Tab 2 is activated, Tab 1’s content is still displayed but no longer visible because Tab 2’s content has pushed it outside of the fixed height div.

An alternate way to deal with non-supported clients is to completely hide the tabbed content and display an alternate non-interactive layout as shown in this Shopping Carousel Example.

Final Code

See the Pen RNVQXa by FreshInbox (@freshinbox) on CodePen.

Let me know what you think!

Hat tip to Mark from Email Code Geek as his email game experiments using checkboxes got me thinking about this technique for Webmail.