jQuery mobile add animation to collapsible-set

Question

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

blablabla

``` 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-…

Accepted Answer

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/

jQuery mobile add animation to collapsible-set

Solution

Problem

Related problems