javascriptjqueryhtmljquery-ui

jQuery UI accordion that keeps multiple sections open?


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.


Solution

  • 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.