![\"Interactive](\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2014\/11\/tabs-animated.gif\")
<\/a><\/p>\n
<\/p>\n
Radio inputs, labels and the :checked pseudo-class<\/h4>\n
Creating completely CSS driven tabs isn\u2019t new. If you google “CSS Tabs” you can find examples of tabs that are built with CSS<\/a>. Unfortunately these techniques don’t stand up to the ravages of Webmail’s CSS processors<\/a>.<\/p>\n Many of the examples use a combination of the radio input, labels and the :checked CSS3 pseudo-class.<\/p>\n Here is an example of how this principle works:<\/p>\n 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<\/a> 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.<\/p>\n Then using the :checked pseudo class and adjacent (+)<\/a> and general (~)<\/a> sibling selectors, we can selectively bold the title and display the associated tabbed content.<\/p>\n 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! The problem with Webmail is that we can\u2019t use certain CSS styles.<\/p>\n 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\u2019t support the CSS3 :checked pseudo class.<\/p>\n We can support Yahoo! Mail and Gmail using three tricks:<\/p>\n 1) We place both the radio element and the tab content within the label. The reason for this is so we don\u2019t have to use the “for” attribute. Clicking a label automatically activates the radio element nested within.<\/p>\n 2) We nest labels, inputs and tab contents within each other like a set of Russian Matryoshka dolls<\/a>. 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.<\/p>\n Finally we need to ensure that non supported clients (Outlook, Outlook.com, Gmail) don\u2019t 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<\/a> (You didn’t seriously expect this would work in the Outlook desktop client, did you?).<\/p>\n 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.<\/p>\n Having all the content completely hidden is not ideal and a simple solution is to move Tab 1\u2019s 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\u2019s content is still displayed but no longer visible because Tab 2\u2019s content has pushed it outside of the fixed height div.<\/p>\n 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<\/a>. See the Pen RNVQXa<\/a> by FreshInbox (@freshinbox<\/a>) on CodePen<\/a>.<\/p>\n
\nTry out the Image Carousel for Email Builder<\/a>.\n<\/div>\n![\"Simple](\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2014\/11\/tabs-simple.gif\")
<\/a><\/p>\n<style>\r\n\/* hide radio element *\/\r\n.myradio {\r\n display:none;\r\n height:0px;\r\n visibility:hidden;\r\n}\r\n.mybox {\r\n width:100px;\r\n height:50px;\r\n background-color: #eeeeee;\r\n display:none;\r\n padding:5px;\r\n}\r\n\/* change tab to bold *\/\r\n.myradio:checked + label {\r\n font-weight: bold;\r\n} \r\n\/* show content *\/\r\n#radio1:checked ~ .box1,\r\n#radio2:checked ~ .box2\r\n{\r\n display:block;\r\n}\r\n<\/style>\r\n\r\n<input name=\"myradio\" type=radio id=\"radio1\" class=\"myradio\" checked>\r\n<label for=\"radio1\">Tab 1<\/label> | \r\n<input name=\"myradio\" type=radio id=\"radio2\" class=\"myradio\">\r\n<label for=\"radio2\">Tab 2<\/label>\r\n\r\n<div class=\"mybox box1\">Box 1<\/div>\r\n<div class=\"mybox box2\">Box 2<\/div><\/pre>\n
<\/p>\nGetting it to work in Webmail.<\/h4>\n
<label><input type=radio name=\"tab\" id=\"tab1\" checked>\r\n<span><div class=\"title1\">Tab 1<\/div>\r\n\r\n <!-- NESTED TAB 2 -->\r\n <label><input type=radio name=\"tab\" id=\"tab2\">\r\n <span><div class=\"title2\">Tab 2<\/div>\r\n\r\n <!-- NESTED TAB 3 -->\r\n <label><input type=radio name=\"tab\" id=\"tab3\">\r\n <span><div class=\"title3\">Tab 3<\/div>\r\n\r\n <div class=\"content3\">\r\n Tab 3 Content\r\n <\/div><\/span>\r\n <\/label>\r\n <!-- \/NESTED TAB 3 -->\r\n\r\n <div class=\"content2\">\r\n Tab 2 Content\r\n <\/div><\/span>\r\n <\/label>\r\n <!-- \/NESTED TAB 2 -->\r\n\r\n<div class=\"content1\">\r\nTab 1 Content\r\n<\/div><\/span>\r\n<\/label><\/pre>\n
<\/p>\nFallback on non supported clients.<\/h4>\n
<style>\r\n.tabcheck:checked + div\r\n{\r\n display:block !important;\r\n max-height: none !important;\r\n height: auto !important;\r\n}\r\n<\/style>\r\n\r\n<input type=radio class=\"tabcheck\" style=\"display:none !important;\" checked>\r\n<div style=\"height:0px;max-height:0px;overflow:hidden;\">\r\nTABBED CONTENT\r\n<\/div><\/pre>\n
<\/p>\n
<\/p>\nFinal Code<\/h4>\n