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! :)

1 comment:

  1. your blogs is awesome.
    4G internet Service
    Videocon Telecom to rollout 4G services in UPE, UPW & Bihar Telecom circles. Plans to utilize the entire spectrum for 4G LTE FDD rollout on 1800 Mhz band in select cities & offer voice on overlay Network.

    ReplyDelete