jquerymobile 1.4.2 - Animate collapsible

Question

I want to animate a collapsible set in jquery mobile 1.4.2. Unfortunately I haven't found anything. All animated scripts use version 1.3.2 oder 1.4.0.

I'm still a newbie and don't know if I just can switch down to 1.4.0 or 1.3.2 keeping my design?

What can I do?

Answer 1

Here is a way to do it:

Instead of a collapsibleset, use a wrapper div with the class="ui-collapsible-set", this gives you the collapsible set styling, but then allows you to implement the logic:

<div class="ui-collapsible-set">
    <div data-role="collapsible" class="animateMe">
        <h3>Section 1</h3>
    <p>I'm the collapsible content for section 1</p>
    </div>
    <div data-role="collapsible" class="animateMe">
        <h3>Section 2</h3>
    <p>I'm the collapsible content for section 2</p>
    </div>
    <div data-role="collapsible" class="animateMe">
        <h3>Section 3</h3>
    <p>I'm the collapsible content for section 3</p>
    </div>
</div>

I have added a class of animateMe to each collapsible for convenience in adding a handler:

$(".animateMe .ui-collapsible-heading-toggle").on("click", function (e) { 
    var current = $(this).closest(".ui-collapsible");             
    if (current.hasClass("ui-collapsible-collapsed")) {
        //collapse all others and then expand this one
        $(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
        $(".ui-collapsible-content", current).slideDown(300);
    } else {
        $(".ui-collapsible-content", current).slideUp(300);
    }
});

This code is a click handler on each collapsible header. It checks to see if the clicked collapsible is currently expanded or collapsed. If it is expanded, we simply collapse it with the slideUp animation. If it is collapsed, we first collapse any expanded items and then expand this one with the slideDown animation.

If you want to allow multiple items to be expanded at the same time, just remove this line:

$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();

Here is a working DEMO