CODEWITHSUNDEEP
jqueryjquery-mobile
Pablo
Pablo

Reputation: 2854

JQuery-Mobile collapsible expand/collapse event

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 event of its header?

EDIT: I would like some kind of event that will also provide information about the expanded/collapsed state of the component.

Upvotes: 22

Views: 44684

Answers (5)

Jasper
Jasper

Reputation: 75993

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/

Upvotes: 61

Robin Manoli
Robin Manoli

Reputation: 2222

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 ) {} );

Upvotes: 16

Phill Pafford
Phill Pafford

Reputation: 85298

You can bind any event you want, example:

Demo:

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>

Upvotes: 3

john
john

Reputation: 1354

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.

Upvotes: 0

Smamatti
Smamatti

Reputation: 3931

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.

Upvotes: 0

Related Questions