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

Answer 1

This code snippet fixes the corner problem (the header bottom corner should disappear when expanding and vice visa)

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
.find("h3")
        .addClass("ui-accordion-header ui-helper-reset ui-corner-bottom ui-corner-top ui-state-default")
        .hover(function() { $(this).toggleClass("ui-state-hover"); })
        .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().slideToggle().toggleClass("ui-accordion-content-active");
            return false;
        })
        .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();

Answer 2

Another possibility would be to use multiple accordion instances (1 accordion per section). I tried using JohnFx's solution above but that created styling issues that I did not have with the default accordion. When I split my 2 section single accordion into two separate accordions I was able to keep the styling just fine. In addition, you don't have to deal with the inner css and html implementation of the accordion.

Answer 3

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

Answer 4

Edited anasnakawa code for those who don't need jQuery UI Accordion styling and wants to keep the code simple. (hope you'll find it useful)

HTML:

<div id="multiOpenAccordion">
        <h3>tab 1</h3>
        <div>A lot of text</div>
        <h3>tab 2</h3>
        <div>A lot of thex 2</div>
</div>

Javascript:

$(function(){
        $('#multiOpenAccordion').multiAccordion();
});

Changed code:

(function($){
    $.fn.extend({ 
        multiAccordion: function(options) {
            var defaults = {};
            var options =  $.extend(defaults, options);
            return this.each(function() {
                var $this = $(this);
                var $h3 = $this.children('h3');
                var $div = $this.children('div');

                $h3.click(function(){
                    var $this = $(this);
                    var $div = $this.next();

                    if ($this.hasClass('closed')) {
                        $this.removeClass('closed').addClass('open');
                        $div.slideDown('fast');
                    } else {
                        $this.removeClass('open').addClass('closed');
                        $div.slideUp('fast');
                    }
                });
            });
        }
    });
})(jQuery);

Edit: If you use Malihu custom scrollbar then there may be problems with IE. IE drops error saying

Invalid argument, Line xx, character xxx

I removed this code from Malihu scrollbar (which is responsible about scrolling content which is more than 1000px glitch) - It helped.

$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}

This gave me real headache

Answer 5

The best solution is to use 1 accordion per section, as Matthew Brown also said.

$( "#accordion1" ).accordion({ collapsible: true });
$( "#accordion2" ).accordion({ collapsible: true });
$( "#accordion3" ).accordion({ collapsible: true });

Answer 6

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.