Question

I have several pages with multiple collapsibles on them. When one is expanded, I want to close all the others. I have read that I need to use .trigger(‘expand’) and .trigger(‘collapse’) to dynamically open and shut… BUT HOW do I fire an event when a collapsible is actually opened?

I thought MAYBE the click event… $('#myExpandable').click() — no go.
I tried to bind .bind('expand', function() {} ); — no go…
And I tried .live('expand', function() {} ); .. all to no avail.

Can someone clue me in here?

Thanks!

Answer 1

You can bind to the element’s expand event, and then trigger a collapse event on the rest of the collaspibles:

//since we don't know when the page will be injected into the DOM,
//we can bind to it's elements once it's been added to the DOM and is about to be initialized
$(document).delegate('#my-page-id', 'pageinit', function () {

    //cache each of the collapsible elements in a variable
    var $collapse = $(this).find('[data-role="collapsible"]');

    //bind to each collapsible's `expand` event
    $collapse.bind('expand', function () {

        //when a collapsible is expanded, collapse all the others on this page
        $collapse.not(this).trigger('collapse');

    });
});​

Here is a demo: http://jsfiddle.net/FhZVn/