{"id":31,"date":"2010-02-05T00:42:00","date_gmt":"2010-02-05T00:42:00","guid":{"rendered":"http:\/\/localhost:10265\/?p=30"},"modified":"2012-06-11T07:12:46","modified_gmt":"2012-06-11T07:12:46","slug":"vertical-tabs-for-jquery-lovers","status":"publish","type":"post","link":"https:\/\/mehdi.biz\/blog\/2010\/02\/05\/vertical-tabs-for-jquery-lovers\/","title":{"rendered":"&#8216;Vertical Tabs&#8217; for jQuery lovers!"},"content":{"rendered":"<!-- google_ad_section_start --><p>Hello folks,<br \/>\nWell, I was just wondering how to start this post and how to write words worth a thousand pictures. However, I believe giving a jQuery plugin a live try, worthes a thousands words. So, hover below and give Vertical Tabs a try.<\/p>\n<p>If it suits your needs, read on.<\/p>\n<p><!--[if IE 7]>\n\n\n<style type=\"text\/css\">\n    #vtab > ul > li.selected{\n        border-right: 1px solid #fff !important;\n    }\n    #vtab > ul > li {\n        border-right: 1px solid #ddd !important;\n    }\n    #vtab > div { \n        z-index: -1 !important;\n        left:1px;\n    }\n<\/style>\n\n\n<![endif]--><\/p>\n<style type=\"text\/css\">\n    #vtab {\n        margin: auto;\n        width: 700px;\n        height: 100%;\n        padding-top: 30px;\n        padding-bottom: 30px;\n    }\n    #vtab > ul > li {\n        width: 110px;\n        height: 110px;\n        background-color: #fff !important;\n        list-style-type: none;\n        display: block;\n        text-align: center;\n        margin: auto;\n        padding-bottom: 10px;\n        border: 1px solid #fff;\n        position: relative;\n        border-right: none;\n        opacity: .3;\n        -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)\";\n        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);\n    }\n    #vtab > ul > li.home {\n        background: url('\/blog\/wp-content\/uploads\/2011\/08\/home.png') no-repeat center center;\n    }\n    #vtab > ul > li.login {\n        background: url('\/blog\/wp-content\/uploads\/2011\/08\/login.png') no-repeat center center;\n    }\n    #vtab > ul > li.support {\n        background: url('\/blog\/wp-content\/uploads\/2011\/08\/support.png') no-repeat center center;\n    }\n    #vtab > ul > li.selected {\n        opacity: 1;\n        -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);\n        border: 1px solid #ddd;\n        border-right: none;\n        z-index: 10;\n        background-color: #fafafa !important;\n        position: relative;\n    }\n    #vtab > ul {\n        float: left;\n        width: 110px;\n        text-align: left;\n        display: block;\n        margin: auto 0;\n        padding: 0;\n        position: relative;\n        top: 30px;\n    }\n    #vtab > div {\n        background-color: #fafafa;\n        margin-left: 110px;\n        border: 1px solid #ddd;\n        min-height: 500px;\n        padding: 12px;\n        position: relative;\n        z-index: 9;\n        -moz-border-radius: 20px;\n    }\n    #vtab > div > h4 {\n        color: #800;\n        font-size: 1.2em;\n        border-bottom: 1px dotted #800;\n        padding-top: 5px;\n        margin-top: 0;\n    }\n    #loginForm label {\n        float: left;\n        width: 100px;\n        text-align: right;\n        clear: left;\n        margin-right: 15px;\n    }\n    #loginForm fieldset {\n        border: none;\n    }\n    #loginForm fieldset > div {\n        padding-top: 3px;\n        padding-bottom: 3px;\n    }\n    #loginForm #login {\n        margin-left: 115px;\n    }\n<\/style>\n<p><script type=\"text\/javascript\">\njQuery(document).ready(function($) {var a=$(\"#vtab>ul>li\");a.mouseover(function(){a.removeClass(\"selected\");$(this).addClass(\"selected\");var b=a.index($(this));$(\"#vtab:first>div\").hide().eq(b).show()}).eq(1).mouseover()});\n<\/script><\/p>\n<div id=\"vtab\">\n<ul>\n<li class=\"home selected\"><\/li>\n<li class=\"login\"><\/li>\n<li class=\"support\"><\/li>\n<\/ul>\n<div>\n<h4>\nWelcome Home!<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt<br \/>\nmetus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam<br \/>\na dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque!<br \/>\nDuis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat<br \/>\nfacilisis. Curabitur dignissim dignissim lacinia!<\/p>\n<p>Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam<br \/>\neleifend sed.\n<\/p><\/div>\n<div>\n<h4>\nSecure Login<\/h4>\n<form id=\"loginForm\" action=\"\">\n<fieldset>\n<legend>You need to sign in with your Email &#038; Password to continue.<\/legend>\n<div>\n<label for=\"email\"><br \/>\nEmail:<\/label><br \/>\n<input type=\"text\" name=\"email\" id=\"email\" \/>\n<\/div>\n<div>\n<label for=\"password\"><br \/>\nPassword:<\/label><br \/>\n<input type=\"password\" name=\"password\" id=\"password\" \/>\n<\/div>\n<div>\n<input id=\"login\" type=\"submit\" value=\"Fake Login\" \/>\n<\/div>\n<\/fieldset>\n<\/form>\n<\/div>\n<div>\n<h4>\nOnline Support<\/h4>\n<p>Maecenas in varius nulla. Morbi leo elit, volutpat ac faucibus in; aliquam eget<br \/>\nmassa. Nullam a neque ac turpis luctus venenatis et placerat risus. Quisque pretium<br \/>\nscelerisque sapien, et accumsan nunc venenatis non. Donec ullamcorper, leo gravida<br \/>\nhendrerit interdum, tellus nisi vestibulum justo; quis dignissim enim risus quis<br \/>\nipsum.<\/p>\n<p>Mauris fringilla, urna vitae posuere commodo, neque tellus tincidunt nisi, aliquam scelerisque purus nulla ac enim. Cras urna urna, vestibulum ut aliquam sed, laoreet et justo! Vestibulum eleifend porta mollis. Donec molestie, turpis sed commodo consequat, erat purus sollicitudin arcu, non vestibulum risus lacus ac ipsum. Curabitur vitae pellentesque purus.\n<\/p><\/div>\n<\/div>\n<p>There are 3 steps to (almost) every jQuery plugin: the HTML, the CSS and the JavaScript code. <\/p>\n<h4>\nStep 1. The HTML<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;vtab&quot;&gt;\r\n    &lt;ul&gt;\r\n        &lt;li class=&quot;home&quot;&gt;&lt;\/li&gt;\r\n        &lt;li class=&quot;login&quot;&gt;&lt;\/li&gt;\r\n        &lt;li class=&quot;support&quot;&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;div&gt;\r\n        &lt;h4&gt;Welcome Home!&lt;\/h4&gt;\r\n        HOME CONTENT\r\n    &lt;\/div&gt;\r\n    &lt;div&gt;\r\n        &lt;h4&gt;Secure Login&lt;\/h4&gt;\r\n        LOGIN CONTENT\r\n    &lt;\/div&gt;\r\n    &lt;div&gt;\r\n        &lt;h4&gt;Online Support&lt;\/h4&gt;\r\n        SUPPORT CONTENT\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>There&#8217;s nothing special about this HTML. It just uses a div, that&#8217;s being identified by vtab, where it contains two elements: An unordered list that represents the left-side tabs, and a 3 different divs, each of which is associated with a given list item. For example, the first div indicates the content of the first tab, say, that&#8217;s being marked with home class. If you need more tabs, you can easily add them to the above HTML structure.<\/p>\n<h4>\nStep 2. The CSS<\/h4>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#vtab {\r\n    margin: auto;\r\n    width: 800px;\r\n    height: 100%;\r\n}\r\n#vtab &gt; ul &gt; li {\r\n    width: 110px;\r\n    height: 110px;\r\n    background-color: #fff !important;\r\n    list-style-type: none;\r\n    display: block;\r\n    text-align: center;\r\n    margin: auto;\r\n    padding-bottom: 10px;\r\n    border: 1px solid #fff;\r\n    position: relative;\r\n    border-right: none;\r\n    opacity: .3;\r\n    -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=30)&quot;;\r\n    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);\r\n}\r\n#vtab &gt; ul &gt; li.home {\r\n    background: url('home.png') no-repeat center center;\r\n}\r\n#vtab &gt; ul &gt; li.login {\r\n    background: url('login.png') no-repeat center center;\r\n}\r\n#vtab &gt; ul &gt; li.support {\r\n    background: url('support.png') no-repeat center center;\r\n}\r\n#vtab &gt; ul &gt; li.selected {\r\n    opacity: 1;\r\n    -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;\r\n    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);\r\n    border: 1px solid #ddd;\r\n    border-right: none;\r\n    z-index: 10;\r\n    background-color: #fafafa !important;\r\n    position: relative;\r\n}\r\n#vtab &gt; ul {\r\n    float: left;\r\n    width: 110px;\r\n    text-align: left;\r\n    display: block;\r\n    margin: auto 0;\r\n    padding: 0;\r\n    position: relative;\r\n    top: 30px;\r\n}\r\n#vtab &gt; div {\r\n    background-color: #fafafa;\r\n    margin-left: 110px;\r\n    border: 1px solid #ddd;\r\n    min-height: 500px;\r\n    padding: 12px;\r\n    position: relative;\r\n    z-index: 9;\r\n    -moz-border-radius: 20px;\r\n}\r\n#vtab &gt; div &gt; h4 {\r\n    color: #800;\r\n    font-size: 1.2em;\r\n    border-bottom: 1px dotted #800;\r\n    padding-top: 5px;\r\n    margin-top: 0;\r\n}\r\n<\/pre>\n<p>Well, the style sheet is simple. However, it&#8217;s somehow tricky since I needed to hide the right border of the selected tab. The trick is that I just move the content&#8217;s div to a layer index that&#8217;s being positioned below the selected tab. This way, the selected tab will be placed over the content and the right border will be gone. The rest is fairly straight forward.<\/p>\n<p>There&#8217;s still one more thing to mention. And that&#8217;s the support for IE7. Here&#8217;s the CSS that&#8217;s being used to address IE7. The important thing here is the z-index of the tabs contents:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#vtab &gt; ul &gt; li.selected{\r\n    border-right: 1px solid #fff !important;\r\n}\r\n#vtab &gt; ul &gt; li {\r\n    border-right: 1px solid #ddd !important;\r\n}\r\n#vtab &gt; div { \r\n    z-index: -1 !important;\r\n    left:1px;\r\n}\r\n<\/pre>\n<h4>\nStep 3. The JavaScript<\/h4>\n<p>And here comes the fun part:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar $items = $('#vtab&gt;ul&gt;li');\r\n$items.mouseover(function() {\r\n    $items.removeClass('selected');\r\n    $(this).addClass('selected');\r\n\r\n    var index = $items.index($(this));\r\n    $('#vtab&gt;div').hide().eq(index).show();\r\n}).eq(1).mouseover();\r\n<\/pre>\n<p>Please note that the tab icons are copyrighted material and they are provided for demonstration purposes only. If you like them, you can buy them at <a href=\"http:\/\/fotolia.com\">fotolia.com<\/a>.<\/p>\n<p>Finally, for your convenience, I&#8217;ve zipped up all the necessary files into a single package. You can <a href=\"\/articles\/vtabs.zip\">download it here<\/a>.<\/p>\n<p>That&#8217;s all for now, folks!<\/p>\n<!-- google_ad_section_end -->","protected":false},"excerpt":{"rendered":"<p>Hello folks,<br \/> Well, I was just wondering how to start this post and how to write words worth a thousand pictures. However, I believe giving a jQuery plugin a live try, worthes a thousands words. So, hover below and give Vertical Tabs a try.<\/p>\n<p>If it suits your needs, read on.<\/p>\n<\/p>\n<p> #vtab { [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-31","post","type-post","status-publish","format-standard","hentry","category-jquery"],"_links":{"self":[{"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":5,"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/posts\/31\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mehdi.biz\/blog\/wp-json\/wp\/v2\/tags?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}