JQuery-Mobile collapsible expand/collapse event

Question

Does anyone know any other way to capture the event of expanding or collapsing a component marked with data-role=\"collapsible\" apart from the onclick

Answer 1

You can bind any event you want, example:

• http://jsfiddle.net/9mDbh/ // Events
• http://jsfiddle.net/9mDbh/1/ // Touch Events

Demo:

• http://jsfiddle.net/9mDbh/5/

JS

$("div:jqmData(role='collapsible')").each(function(){
    bindEventTouch($(this)); 
});

function bindEventTouch(element) {
    element.bind('tap', function(event, ui) {
       if(element.hasClass('ui-collapsible-collapsed')) {
            alert(element.attr('id')+' is closed');
        } else {
            alert(element.attr('id')+' is open');
        }
    });
}

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <div data-role="collapsible" id="number1">
           <h3>Header #1</h3>
           <p>I'm Header #1</p>
        </div>
        <br />
        <div data-role="collapsible" data-collapsed="false" id="number2">
           <h3>Header #2</h3>
           <p>I'm Header #2</p>
        </div>
    </div>
</div>

Answer 2

I don't think there is another way to do this. I do not believe that you can utilize animationComplete in this case as described here:
http://jquerymobile.com/test/docs/api/events.html

Maybe you can utilize certain class changes on the specific elements, which in fact isn't better than binding an onclick event of the header.

Answer 3

You could try the jQuery mobile tap event. I haven't used it personally, but I hear it's similar to the mousedown event handler. If you gave a little more detail about why the onclick isn't working maybe we could help you out a little more.

Answer 4

There are custom events for the collapsible blocks. You can bind to the expand and collapse events:

$('#my-collapsible').bind('expand', function () {
    alert('Expanded');
}).bind('collapse', function () {
    alert('Collapsed');
});

Here is a jsfiddle: http://jsfiddle.net/6txWy/

Answer 5

In jQuery Mobile 1.4 there are the collapsiblecollapse and collapsibleexpand events. https://api.jquerymobile.com/collapsible/#event-collapse

$( ".selector" ).on( "collapsiblecollapse", function( event, ui ) {} );