Interactive Tabs for Email

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.

Interactive Tabs for Email


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.

Can’t wait to get started with interactive email?
Try out the Image Carousel for Email Builder.

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:

Simple Tabs

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


Subscribe to the #EmailGeeks Newsletter


Latest Comments
  1. B

    You should use http://codepen.io/ for your code demos.

    That way us the reader can interact with it.

    • Justin

      Thanks for the idea! Done.

  2. Timo

    Seems like the fallback doesn’t work in postbox. The first two tabs do work but are kinda mashed into another.

    • Justin

      Hmm… they must be stripping certain elements from the markup. I’ll take a look at Postbox when I have some time.

  3. ferdinand marte

    Just tested the entire code in Mailchimp but only Tab1 shows up in Gmail & Yahoo.
    In Yahoo, the View Deal link is not clickable. I used Firefox and Chrome. I want to apply the tabs in my email campaign. Any ideas why it’s not working? If not Mailchimp, what emailing services will this work?

    • Justin

      It looks like Mailchimp strips out form elements. Not too surprising. If you just want to test you could use https://putsmail.com/ but Campaign Monitor supports the Tabs markup.

      As for View Deal, the link in the example goes to “#” so Yahoo! Mail just disables the link. If you put a real URL, it will work in Yahoo! Mail.

      • ferdinand marte

        Thanks Justin. Will again try using putsmail.

  4. chris bryan

    EmailDirect.com will support this. Great work, Justin!

  5. Richard Bland

    Hi Justin, Great work btw. I am actually creating my own tabbed email based upon your code. I was wondering, have you attempted any CSS3 transitions with this as well? I am trying to create a nice smooth fade in when you click on a tab. Is it even possible with this code?

    Thanks kindly

    • Justin

      You can definitely do that using transitions and opacity on the content2 and content3 divs.
      However in this example tab 1’s content is never really hidden (just pushed out of the container) so it wouldn’t work with all 3 tabs. You can put it back inside tab1 and name it content1 and it would work.

      I might try to incorporate that in the next example.

    • Justin

      You can see an example with a fade in effect here:
      http://codepen.io/freshinbox/pen/zxWabO

  6. akaczka

    Hey Justin, Great work! I am trying to get this to work in mobile emails only. I have a responsive email that I am using but since Seems the if mso statement strips all of the styles I had for my tabs in every outlook client (style=”display:none !important;) <– probably the reason why. Any way to get my style back in desktop?

  7. jeni

    Question….. I have modified the code to fit our template and am running into issues with gmail in the gmail app. The tabs are not showing. Any thoughts?

    • Justin

      Unfortunately, the Gmail app completely strips the <style> tags so the Gmail technique does not work there.

  8. AJ

    Hey Justin, I just sent tests to my personal gmail and work gmail. My personal gmail looks great, however gmail for work does not show the tabs.

    http://www.screencast.com/t/eLNh16G3LWy0

    Do you know why it’s not rendering the tabs?

    • Justin

      Hey AJ, unfortunately, Gmail for Business (like Gmail apps) completely strips the style tag so making this technique not work on that platform.

    • KD

      Hello AJ/Justin, Which ESP (Email Service Provider) you use to send “Tab” email? I tried putsmail.com but received email without tabs.

  9. reeholly@gmail.com

    Do you have any ideas to make this responsive with media queries?

    • Justin

      Its something I’m considering when I have some time :) Feel free to share your experiments if you want to make an attempt at it!

      • reeholly@gmail.com

        k. i am, just made something, still some tweaks, but i think it will work.

  10. akaczka

    Is there any way to have the tabs on the bottom instead of above the images? I tried swapping a few things in places but couldn’t get the 2nd or 3rd tab to appear at the bottom and function successfully.

  11. Natalie

    This looks like an awesome piece of code, however it doesn’t seem to work in Gmail at all (no tabs show) – any ideas on how to fix this?

    • Justin

      Hi Natalie, was the account gmail.com or a business Gmail account? This doesn’t work on Gmail business accounts as well as the Gmail app unfortunately.

  12. Diego Ezequiel Mendonca

    Is there a way to do it without using static height?

  13. suhas

    How to send this mail to bulk client

  14. Paul

    I took the code directly from code pen and sent tests out of Saleforce Martketing cloud and Putsmail just to see how this should look. I sent to my personal yahoo and gmail accounts as well as on Outlook 2010 account and business gmail account. It did not work in any of them. There were no tabs whatsoever. Am I missing something. Has support for this changed. Why don’t I get a working example?

    • Justin

      Due to Gmail’s changes in 2016, this example only works in iOS, Samsung, Apple Mail, Yahoo! Mail and AOL Mail.

  15. Sarah

    Someone asked this previously but didn’t get a response…
    Is there a way to do it without using static height?

    • Justin

      I miiight have a solution…

  16. Haitham Qalalweh

    Hi Justin,

    is there a way to use the same in outlook ?

  17. Greg

    Can a similar technique be used for accordion type dropdowns?

    Would be cool to ask a question and have the user click for an answer that would appear as a drop down box. Hopefully, non supportive platforms would just show the question and answer.

Leave a Reply

Your email address will not be published. Required fields are marked *