Vertical Tabs with JQuery

Question

I want tabs along the left side of the page instead of across the top   I m already loading jQuery for other reasons  effects   so I prefer using jQuery to another UI framework   Searches on  vertical tabs jquery  yield links to works-in-progress     Is getting Vertical Tabs to work across browsers fraught  or is it so trivial that  once you have a solution  it doesn t seem worthwhile to post example code

User · Answer

Try here   http   www sunsean com idTabs   A look at the Freedom tab might have what you need   Let me know if you find something you like   I worked on the exact same problem a few months ago and decided to implement myself   I like what I did  but it might have been nice to use a standard library

User · Answer

o O     Poker Face  i know its late   just add beloww css style   lt style type  text css  gt         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     lt  style gt    UPDATED   http   jqueryui com tabs  vertical

User · Answer

Another options is Matteo Bicocchi s jQuery mb extruder tabs plug-in   http   pupunzi open-lab com mb-jquery-components jquery-mb-extruder

User · Answer

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

User · Answer

Have a look at Listamatic   Tabs are semantically just a list of items styled in a particular way   You don t even necessarily need javascript to make vertical tabs work as the various examples at Listamatic show

User · Answer

I ve created a vertical menu and tabs changing in the middle of the page  I changed two words on the code source and I set apart two different divs  menu    lt div class  arrowgreen  gt     lt ul class  tabNavigation  gt        lt li gt   lt a href   first  title  Home  gt Tab 1 lt  a gt  lt  li gt       lt li gt   lt a href   secund  title  Home  gt Tab 2 lt  a gt  lt  li gt     lt  ul gt   lt  div gt     content    lt div class  pages  gt     lt div id  first  gt      CONTENT 1    lt  div gt     lt div id  secund  gt      CONTENT 2    lt  div gt   lt  div gt    the code works with the div apart     function          var tabContainers      div pages  gt  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

User · Answer

I wouldn t expect vertical tabs to need different Javascript from horizontal tabs   The only thing that would be different is the CSS for presenting the tabs and content on the page  JS for tabs generally does no more than show hide maybe load content

User · Answer

Have a look at the jQuery UI vertical Tabs Docu  I try out it  it worked fine    lt style type  text css  gt     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    lt  style gt     lt script gt        document  ready function                 tabs   tabs   addClass  ui-tabs-vertical ui-helper-clearfix                tabs li   removeClass  ui-corner-top   addClass  ui-corner-left              lt  script gt

[javascript] Vertical Tabs with JQuery?

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui