Open all accordion windows at the same time

Question

Hi all,

I am using jQuery accordion plugin for my application. Is there a way to open sections at the same time(after page has loaded) so that contents of all pages are shown at the same time. If it is not possible please give me a link where I can achieve similar to that functionality. Thanks. I am a newbie to jQuery.

Answer 1

You should read NOTES in this page. Here I copy and pasted it directly from that page:

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 2

jQuery makes it very easy to make your own accordion without a plugin. For example, this HTML:

<div class="accordion_toggler">
    Section One
</div>

<div class="accordion_content">
    ..... content here ......
</div>

and this jQuery:

$('.accordion_toggler').click(function() {
    $(this).next('.accordion_content').slideToggle();
});

Any time you click on an accordion_toggler , the following accordion_content will toggle (slide up or down in this case). To start with all the content hidden but allow multiple to be open at the same time, use this CSS:

.accordion_content { display: none }