Animated Collapsible Set - MOBILE STYLE

by bizamajig

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
    <div data-role="page" id="testPage" data-tabbar="true" data-title="Test Animated Collapsible Set">
        <div data-role="header">
            <h3>
                Test Animated Collapsible Set
            </h3>
        </div>
        <div data-role="content">
            <div data-role="collapsible-set">
                <div data-role="collapsible" data-collapsed="false" data-theme="b">
                    <h3>
                        Test 1
                    </h3>
                    <ul data-role="listview" data-inset="false">
                        <li><a href="#start" data-transition="slide">Object 1</a></li>
                        <li><a href="#start" data-transition="slide">Object 2</a></li>
                        <li><a href="#start" data-transition="slide">Object 3</a></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed="true" data-theme="b">
                    <h3>
                        Test 2
                    </h3>
                    <ul data-role="listview" data-inset="false">
                        <li><a href="#start" data-transition="slide">Object 1</a></li>
                        <li><a href="#start" data-transition="slide">Object 2</a></li>
                        <li><a href="#start" data-transition="slide">Object 3</a></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed="true" data-theme="b">
                    <h3>
                        Test 3
                    </h3>
                    <ul data-role="listview" data-inset="false">
                        <li><a href="#start" data-transition="slide">Object 1</a></li>
                        <li><a href="#start" data-transition="slide">Object 2</a></li>
                      ...

JavaScript

/*\
Animate collapsible set;
\*/
$(document).one("pagebeforechange", function() {

    // animation speed;
    var animationSpeed = 200;

    function animateCollapsibleSet(elm) {

        // can attach events only one time, otherwise we create infinity loop;
        elm.one("expand", function() {

            // hide the other collapsibles first;
            $(this).parent().find(".ui-collapsible-content").not(".ui-collapsible-content-collapsed").trigger("collapse");

            // animate show on collapsible;
            $(this).find(".ui-collapsible-content").slideDown(animationSpeed, function() {

                // trigger original event and attach the animation again;
                animateCollapsibleSet($(this).parent().trigger("expand"));
            });

            // we do our own call to the original event;
            return false;
        }).one("collapse", function() {

            // animate hide on collapsible;
            $(this).find(".ui-collapsible-content").slideUp(animationSpeed, function() {

                // trigger original event;
                $(this).parent().trigger("collapse");
            });

            // we do our own call to the original event;
            return false;
        });
    }

    // init;
    animateCollapsibleSet($("[data-role='collapsible-set'] > [data-role='collapsible']"));
});