Looking for a plug-in similar to Accordian, but that allows multiple sections open at once.

Question

I am looking to have a UI element similar to that offered by the JQUERY Accordian plug-in, but allowing the user to keep multiple sections open at once.

The documentation has the following to say, and suggests an alternate approach with a code snippet (see below). That is great and all, and the code they provide basically works, but I find myself recreating a lot of things built into the plugin like switching out the classes and applying the themes manually in the XHTML.

My Questions:

1. Before I get too far along the manual route, does anyone know of a similar plug-in, or mod to this one to allow multiple panels to be open at once?

2. Is there a another common name for an accordion-like control that allows multiple open panels that I could use to Google for other options?

Here is the part I referenced earlier from the documentation, if it matters.

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();
});

Answer 1

I just ran into that same problem last night. This might work for you. It did for me.

Answer 2

I modified some code I had found online last week looking for a similar solution. This assumes that each accordion is a nested unordered list. To get this working you must have unique IDs for each of your accordions. Here's an example:

HTML

<ul id="uniqueAccordion1" class="menu">
    <li class="noaccordion">
        <a href="#">Top Level 1</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Top Level 2</a>
        <ul>
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
        </ul>
    </li>
</ul>

JS

$(function() {
    // initialize admin menu
    loadNav();
});
function loadNav() {
    // initially show opened
    $.each($('ul.menu'), function(){
        $('#' + this.id + ' .expandfirst ul:first').show();
    });

    // watch for click
    $('ul.menu li > a').click(function() {
        var $this = $(this);
        var $parent = $this.parent();
        if ($parent.hasClass('noaccordion')) {
            return false;
        }
        var $checkElement = $this.next();
        if ($checkElement.is('ul')) {
            $checkElement.slideToggle('fast');
        }
        return false;
    });
}

You will need your own CSS to support this but it allows for any number of accordions and also allows you to disable a particular section from being closed (if, for instance, you use this for navigation) by adding the class noaccordion to a main level LI tag. Lastly, you may add a class expandfirst to a main level LI to auto open the accordion for the matching element(s) on page load.

Answer 3

Thanks for everyone's suggestions, but I finally found something on my own that does exactly what I was looking for. I'm adding it as an answer for anyone else who needs something similar.

The Solution
Using the code and sample XHTML here you can extend the JQuery Accordion plug-in to have multiple panels open at once and keep the theming and other functionality provided by the plug-in without recreating the styles.

See the site linked above for a complete example, but here is the meat of the code needed to make the accordion control allow multiple panels to be open. Use the same HTML to define the headers and content as described in the plug-in documentation

    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
    $(function() {
     $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset")
     .find("h3")
      .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
      .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
      .click(function() {
       $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
        .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
       .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
       .end().next().toggleClass("ui-accordion-content-active").toggle();
       return false;
      })
      .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();
    })
    </script>

Answer 4

You can find an updated version of the The Solution of this question on this paste.

Happy coding ;)