jQuery UI accordion that keeps multiple sections open

Question

I may be an idiot  but how do you keep multiple sections in jQuery UI s accordion open   The demos all have only one open at a time    I m looking for a collapseable menu type system

User · Answer

Even simpler  have it labeled in each li tag s class attribute and have jquery to loop through each li to initialize the accordion

User · Answer

open jquery-ui-  js  find   widget   ui accordion       find  eventHandler  function  event     inside  change   var options   this options              active   this active            clicked      event currentTarget                clickedIsActive   clicked  0       active  0                collapsing   clickedIsActive  amp  amp  options collapsible             toShow   collapsing         clicked next                toHide   active next                eventData                     oldHeader  active                  oldPanel  toHide                  newHeader  collapsing         clicked                  newPanel  toShow                 to   var options   this options      clicked      event currentTarget       clickedIsActive   clicked next   attr  aria-expanded       true       collapsing   clickedIsActive  amp  amp  options collapsible       if  clickedIsActive    true            var toShow                var toHide   clicked next          else           var toShow   clicked next            var toHide                   eventData             oldHeader               oldPanel  toHide          newHeader  clicked          newPanel  toShow          before active removeClass   ui-accordion-header-active ui-state-active      add if  typeof active       undefined     and closing    enjoy

User · Answer

Or even simpler    lt div class  accordion  gt       lt h3 gt  lt a href     gt First lt  a gt  lt  h3 gt       lt div gt Lorem ipsum dolor sit amet  Lorem ipsum dolor sit amet  Lorem ipsum dolor sit amet  lt  div gt   lt  div gt       lt div class  accordion  gt       lt h3 gt  lt a href     gt Second lt  a gt  lt  h3 gt       lt div gt Phasellus mattis tincidunt nibh  lt  div gt   lt  div gt            lt div class  accordion  gt       lt h3 gt  lt a href     gt Third lt  a gt  lt  h3 gt       lt div gt Nam dui erat  auctor a  dignissim quis  lt  div gt   lt  div gt   lt script type  text javascript  gt          accordion   accordion   collapsible  true  active  false      lt  script gt

User · Answer

I found a tricky solution  Lets call the same function twice but with different id   JQuery Code    function              accordion1    accordion           collapsible  true  active  false  heightStyle   content                   accordion2    accordion           collapsible  true  active  false  heightStyle   content                HTML Code   lt div id  accordion1  gt       lt h3 gt Section 1 lt  h3 gt       lt div gt Section one Text lt  div gt   lt  div gt   lt div id  accordion2  gt          lt h3 gt Section 2 lt  h3 gt       lt div gt Section two Text lt  div gt   lt  div gt

User · Answer

Simple  active the accordion to a class  and then create divs with this  like multiples instances of accordion   Like this   JS    function              accordion    accordion           collapsible  true          clearStyle  true          active  false               HTML   lt div class  accordion  gt       lt h3 gt Title lt  h3 gt       lt p gt lorem lt  p gt   lt  div gt   lt div class  accordion  gt       lt h3 gt Title lt  h3 gt       lt p gt lorem lt  p gt   lt  div gt   lt div class  accordion  gt       lt h3 gt Title lt  h3 gt       lt p gt lorem lt  p gt   lt  div gt    https   jsfiddle net sparhawk odin pm91whz3

User · Answer

Actually was searching the internet for a solution to this for a while  And the accepted answer gives the good  by the book  answer  But I didn t want to accept that so I kept searching and found this    http   jsbin com eqape 1601 edit - Live Example  This example pulls in the proper styles and adds the functionality requested at the same time  complete with space to write add your own functionality on each header click  Also allows multiple divs to be in between the  h3 s        notaccordion   addClass  ui-accordion ui-accordion-icons ui-widget ui-helper-reset      find  h3        addClass  ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom        hover function       this  toggleClass  ui-state-hover            prepend   lt span class  ui-icon ui-icon-triangle-1-e  gt  lt  span gt         click function             this  find   gt   ui-icon   toggleClass  ui-icon-triangle-1-e ui-icon-triangle-1-s   end              next   toggleClass  ui-accordion-content-active   slideToggle            return false              next          addClass  ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom          hide      HTML code    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt meta charset  UTF-8    gt   lt title gt Toggle Panels  not accordion  using ui-accordion  styles lt  title gt    lt  -- jQuery UI     http   jquery com   http   jqueryui com   http   jqueryui com docs Theming  -- gt   lt style type  text css  gt body font 62 5  Verdana Arial sans-serif  lt  style gt   lt link href  http   ajax googleapis com ajax libs jqueryui 1 8 1 themes base jquery-ui css  rel  stylesheet  type  text css    gt   lt script src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js  gt  lt  script gt   lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 1 jquery-ui min js  gt  lt  script gt     lt  head gt   lt body gt    lt h1 gt Toggle Panels lt  h1 gt   lt div id  notaccordion  gt     lt h3 gt  lt a href     gt Section 1 lt  a gt  lt  h3 gt     lt div class  content  gt      Mauris mauris  ante  blandit et  ultrices a  suscipit eget  quam  Integer     ut neque  Vivamus  nisi metus  molestie vel  gravida in  condimentum sit     amet  nunc  Nam a  nibh  Donec suscipit eros  Nam mi  Proin viverra leo ut     odio  Curabitur  malesuada  Vestibulum a velit eu ante scelerisque vulputate     lt  div gt     lt h3 gt  lt a href     gt Section 2 lt  a gt  lt  h3 gt     lt div gt      Sed non urna  Donec et ante  Phasellus eu ligula   Vestibulum sit amet     purus  Vivamus hendrerit  dolor at aliquet laoreet   mauris turpis porttitor     velit  faucibus interdum tellus libero ac justo   Vivamus non quam  In     suscipit faucibus urna     lt  div gt     lt h3 gt  lt a href     gt Section 3 lt  a gt  lt  h3 gt     lt div class  top  gt    Top top top top    lt  div gt     lt div class  content  gt      Nam enim risus  molestie et  porta ac  aliquam ac   risus  Quisque lobortis      Phasellus pellentesque purus in massa  Aenean in pede   Phasellus ac libero     ac tellus pellentesque semper  Sed ac felis  Sed  commodo  magna quis     lacinia ornare  quam ante aliquam nisi  eu iaculis leo  purus venenatis dui       lt ul gt         lt li gt List item one lt  li gt         lt li gt List item two lt  li gt         lt li gt List item  three lt  li gt       lt  ul gt     lt  div gt     lt div class  bottom  gt    Bottom bottom bottom bottom    lt  div gt     lt h3 gt  lt a href     gt Section 4 lt  a gt  lt  h3 gt     lt div gt      Cras dictum  Pellentesque habitant morbi tristique  senectus et netus     et malesuada fames ac turpis egestas  Vestibulum ante  ipsum primis in     faucibus orci luctus et ultrices posuere cubilia Curae   Aenean lacinia     mauris vel est      Suspendisse eu nisl  Nullam ut libero  Integer  dignissim consequat lectus      Class aptent taciti sociosqu ad litora torquent per  conubia nostra  per     inceptos himenaeos     lt  div gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

Without jQuery-UI accordion  one can simply do this    lt div class  section  gt     lt div class  section-title  gt      Section 1    lt  div gt     lt div class  section-content  gt      Section 1 Content  Lorem ipsum dolor sit amet  Lorem ipsum dolor sit amet     lt  div gt   lt  div gt    lt div class  section  gt     lt div class  section-title  gt      Section 2    lt  div gt     lt div class  section-content  gt      Section 2 Content  Lorem ipsum dolor sit amet  Lorem ipsum dolor sit amet     lt  div gt   lt  div gt    And js       section-title    click function           this  parent   find    section-content    slideToggle          https   jsfiddle net gayan dasanayake 6ogxL7nm

User · Answer

Pretty simple    lt script type  text javascript  gt       function                function                     accordion  gt  div   accordion   header   h3   collapsible  true                       jQuery    lt  script gt    lt div id  accordion  gt       lt div gt           lt h3 gt  lt a href     gt First lt  a gt  lt  h3 gt           lt div gt Lorem ipsum dolor sit amet  Lorem ipsum dolor sit amet  Lorem ipsum dolor sit amet  lt  div gt       lt  div gt       lt div gt           lt h3 gt  lt a href     gt Second lt  a gt  lt  h3 gt           lt div gt Phasellus mattis tincidunt nibh  lt  div gt       lt  div gt       lt div gt           lt h3 gt  lt a href     gt Third lt  a gt  lt  h3 gt           lt div gt Nam dui erat  auctor a  dignissim quis  lt  div gt       lt  div gt   lt  div gt

User · Answer

Just call each section of the accordion as its own accordion   active  n will be 0 for the first one  so it will display  and 1  2  3  4  etc for the rest   Since each one is it s own accordion  they will all have only 1 section  and the rest will be collapsed to start       accordian   each function n  el        el  accordion       heightStyle   content       collapsible  true      active  n

User · Answer

This was originally discussed in the jQuery UI documentation for Accordion      NOTE  If you want multiple sections   open at once  don t use an accordion      An accordion doesn t allow more than   one content panel to be open at the   same time  and it takes a lot of   effort to do that  If you are looking   for a widget that allows more than one   content panel to be open  don t use   this  Usually it can be written with a   few lines of jQuery instead  something   like this   jQuery document  ready function          accordion  head   click function             this  next   toggle          return false       next   hide              Or animated   jQuery document  ready function          accordion  head   click function             this  next   toggle  slow          return false       next   hide            I may be an idiot  - You re not an idiot if you don t read the documentation  but if you re having problems  it usually speeds up finding a solution

User · Answer

Simple  create multiple accordian div each representating one anchor tag like    lt div gt   lt div class  accordion  gt   lt a href       gt First heading lt  a gt   lt  div gt   lt div class  accordion  gt   lt a href       gt First heading lt  a gt   lt  div gt   lt  div gt    It adds up some markup  But works like a pro

User · Answer

Posted this in a similar thread  but thought it might be relevant here as well   Achieving this with a single instance of jQuery-UI Accordion  As others have noted  the Accordion widget does not have an API option to do this directly  However  if for some reason you must use the widget  e g  you re maintaining an existing system   it is possible to achieve this by using the beforeActivate event handler option to subvert and emulate the default behavior of the widget   For example       accordion   accordion       collapsible true       beforeActivate  function event  ui                The accordion believes a panel is being opened         if  ui newHeader 0                 var currHeader    ui newHeader              var currContent   currHeader next   ui-accordion-content                The accordion believes a panel is being closed           else               var currHeader    ui oldHeader              var currContent   currHeader next   ui-accordion-content                          Since we ve changed the default behavior  this detects the actual status         var isPanelSelected   currHeader attr  aria-selected       true                Toggle the panel s header         currHeader toggleClass  ui-corner-all  isPanelSelected  toggleClass  accordion-header-active ui-state-active ui-corner-top   isPanelSelected  attr  aria-selected     isPanelSelected  toString                  Toggle the panel s icon         currHeader children   ui-icon   toggleClass  ui-icon-triangle-1-e  isPanelSelected  toggleClass  ui-icon-triangle-1-s   isPanelSelected                Toggle the panel s content         currContent toggleClass  accordion-content-active   isPanelSelected              if  isPanelSelected    currContent slideUp       else   currContent slideDown               return false     Cancels the default action             See a jsFiddle demo

User · Answer

You just use jquery each   function      function              selector class name    each function               this   accordion             collapsible  true             active false            heightStyle   content

User · Answer

I have done a jQuery plugin that has the same look of jQuery UI Accordion and can keep all tabs sections open  you can find it here   http   anasnakawa wordpress com 2011 01 25 jquery-ui-multi-open-accordion   works with the same markup   lt div id  multiOpenAccordion  gt           lt h3 gt  lt a href     gt tab 1 lt  a gt  lt  h3 gt           lt div gt Lorem ipsum dolor sit amet lt  div gt           lt h3 gt  lt a href     gt tab 2 lt  a gt  lt  h3 gt           lt div gt Lorem ipsum dolor sit amet lt  div gt   lt  div gt    Javascript code    function                multiOpenAccordion   multiAccordion              you can use a number or an array with active option to specify which tabs to be opened by default             multiOpenAccordion   multiAccordion   active  1               OR            multiOpenAccordion   multiAccordion   active   1  2  3                  multiOpenAccordion   multiAccordion   active  false        no opened tabs       UPDATE  the plugin has been updated to support default active tabs option  UPDATE  This plugin is now deprecated

[javascript] jQuery UI accordion that keeps multiple sections open?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to jquery-ui