Sunday, August 11, 2013

Accordion Expand/Collapse all in jQuery Mobile

The default behavior of the Accordion in jQuery Mobile allows you to expand or collapse only one Accordion tab at a time. I came up with a code to expand/collapse all tabs at once.

HTML:

Hello 1

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

Hello 2

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

Hello 3

I'm the collapsible content. By default I'm closed, but you can click the header to open me.
Open All Collapsible Close All Collapsible


And here is the jQuery Mobile code to achieve the effect. I assume that you have included all the necessary jQM files.

$('#openAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('expand');
    });
});
$('#closeAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('collapse'); 
    });
});


If you have a better way of doing this, let me know! :)

No comments:

Post a Comment