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

    

        

           
Header #1
           
I'm Header #1
        
        

        

           
Header #2
           
I'm Header #2