Looking for a JQuery plug-in similar to Accordion, but that allows multiple sections open at once [closed]

Question

I am looking to have a UI element similar to that offered by the JQUERY Accordion 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

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"></script>     <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script>     <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script>     <script type="text/javascript">     $(function() {         $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")         .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 2

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

<div id="multiOpenAccordion">         <h3><a href="#">tab 1</a></h3>         <div>Lorem ipsum dolor sit amet</div>         <h3><a href="#">tab 2</a></h3>         <div>Lorem ipsum dolor sit amet</div> </div> 

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