Question

I need to create an expand all and collapse all nav for a jquery accordion.

I have each individual accordion working fine with this:

$('.accordion h3').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();

<div class="accordion">
<h3 class="head"><a href="#">Section 1</a></h3>
<div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
</div>

<div class="accordion">
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
</div>

ETC…..

I need to do something like this for the expand all and the opposite for collapse all:

$('#nav .expand').click(function(){
    $('.accordion h3').next().animate({
            height: "auto"
        });
        return false;
});

Still new to jquery so not aware of all that it has to offer. Can someone point me in the right direction with what I am trying to do.
Thanks

Answer 1

It doesn’t seem like you’re using jQuery ui Accordion.

Here’s a fiddle with $.accordion(): http://jsfiddle.net/C3Gra/1/

Fiddle without $.accordion(): http://jsfiddle.net/w2uXZ/

Edit: $.accordion() doesn’t really play well with expanding all because its internal state has room for at most one active element.