Vertical tabs with jQuery?

Question

I need tabs along the left side of the page, not the top. I am already loading jQuery for other reasons (effects), so I prefer using jQuery for a different user interface infrastructure. Searches for "vertical jquery tabs" provide links to work in progress.

It turns out that vertical tabs work in browsers is fraught, or is it so trivial that, as soon as you have a solution, it seems that it is not worth publishing an example code?

Answer 1

Check out the jQuery UI vertical tab . I tried, it worked fine.

<style type="text/css"> /* Vertical Tabs ----------------------------------*/ .ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} </style> <script> $(document).ready(function() { $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); }); </script> 

Answer 2

Try it here:

http://www.sunsean.com/idTabs/

A look at the Freedom tab may have what you need.

Let me know if you find something you like. A few months ago, I worked on the same problem and decided to realize myself. I like what I did, but it would be nice to use the standard library.

Answer 3

I created a vertical menu and tabs that change in the middle of the page. I changed two words to the source code and I highlighted two different divs

menu:

 <div class="arrowgreen"> <ul class="tabNavigation"> <li> <a href="#first" title="Home">Tab 1</a></li> <li> <a href="#secund" title="Home">Tab 2</a></li> </ul> </div> 

Content:

 <div class="pages"> <div id="first"> CONTENT 1 </div> <div id="secund"> CONTENT 2 </div> </div> 

code works with div div

 $(function () { var tabContainers = $('div.pages > div'); $('div.arrowgreen ul.tabNavigation a').click(function () { tabContainers.hide().filter(this.hash).show(); $('div.arrowgreen ul.tabNavigation a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); }); 

Answer 4

 //o_O\\ (Poker Face) i know its late 

just add style below CSS

 <style type="text/css"> /* Vertical Tabs ----------------------------------*/ .ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} </style> 

UPDATED! http://jqueryui.com/tabs/#vertical

Answer 5

I would not expect vertical tabs to need different Javascript from horizontal tabs. The only thing that would be different is CSS to represent the tabs and content on the page. JS for tabs is usually no more than showing / hiding /, possibly loading content.

Answer 6

Another option is the Matteo Bicocchi jQuery mb.extruder plugin: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Answer 7

Take a look at Listamatic . Tabs semantically represent a list of elements created in a certain way. You don't even need javascript to make vertical tabs work like various examples in a Listamatic show.

Answer 8

super simple function that will allow you to create your own tab / accordion structure here: http://jsfiddle.net/nabeezy/v36DF/

 bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) { //Dependent on jQuery //PARAMETERS //tabClass: 'the class name of the DOM elements that will be clicked', //tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)', //contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked', //contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)', //MUST call bindSets() after dom has rendered var tabs = $('.' + tabClass); var tabContent = $('.' + contentClass); if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')}; tabs.each(function (index) { this.matchedElement = tabContent[index]; $(this).click(function () { tabs.each(function () { this.classList.remove(tabClassActive); }); tabContent.each(function () { this.classList.add(contentClassHidden); }); this.classList.add(tabClassActive); this.matchedElement.classList.remove(contentClassHidden); }); }) tabContent.each(function () { this.classList.add(contentClassHidden); }); //tabs[0].click(); } bindSets('tabs','active','content','hidden');