CODEWITHSUNDEEP
jquery-mobile
lukas.pukenis
lukas.pukenis

Reputation: 13597

jQuery mobile add animation to collapsible-set

I would like to add an animation to collapsible set with jQuery Mobile. Let me show a simple example of this:

<div id="tiles" data-role="collapsible-set" data-iconpos="right">
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>

jQuery Mobile handles this perfectly and shows me collapsible set of 3 items. What I want is ANIMATION, however I seem not to find anything in the docs.

I haven't tested yet how simple CSS animation(animating height property) would work, however is there a jQuery Mobile way of doing it like turning some internal flag ?

EDIT I have tested out a simple jQuery animate method and it actually works. Just in case anyone else needs this. It runs smoothly even on my 528MHz Android phone on a default browser. A snippet I have added is really simple:

$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
    $(this).next().css('height', '0').animate({
        height: '100px'
    });
});

Upvotes: 5

Views: 12455

Answers (4)

Jacek Pietal
Jacek Pietal

Reputation: 2019

The accepted answer doesnt account for that it doesnt change the collapsible cursor because of return false, so this is my answer working:

In my Project it was the contents relative to the [date-role="collapsible"] are $(this).find('>*:not(h3)')

/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
    $(this).find('>*:not(h3)').each(function() {
        if (!$(this).is(':visible')) {
            $(this).stop().slideToggle();
        }
    });
}).on('collapse', function (event) {
    $(this).find('>*:not(h3)').each(function() {
        if ($(this).is(':visible')) {
            $(this).stop().slideToggle();
        }
    });
});

Upvotes: 0

Peter Kassenaar
Peter Kassenaar

Reputation: 21

Please note that in jQuery Mobile 1.4 and up you need to bind to the collapsibleexpand and collapsiblecollapse events instead of expand and collapse. So the complete code becomes

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
    $(this).find('p').slideToggle(500);
    return false;
});

Upvotes: 2

Daniel Berler
Daniel Berler

Reputation: 1

​The code is not entirely right. It overrides the default jquery mobile implementation of the expand collapse events, but does not handle the change of the expand collapse icons.

A better code will be:

$('[data-role="collapsible"] h3:first').bind('click', function (event) {
   $(this).next('p').slideToggle(500);
   return false;
});​

Upvotes: 0

Jasper
Jasper

Reputation: 75993

Here ya go:

$('[data-role="collapsible"]').bind('expand collapse', function (event) {
    $(this).find('p').slideToggle(500);
    return false;
});​

I liked the idea you were going for so I played around with it a bit. This hooks into the way jQuery Mobile controls collapsible widgets so it's a bit less hacky then binding to the heading element.

The return false; stops the default behavior and the other line toggles the content in/out of view using the jQuery slideUp/slideDown animations. You could also use .fadeToggle() or roll your own animations. If you check event.type you can animate based on the event fired.

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

Upvotes: 6

Related Questions