jQM 1.4 animated collapsibleset

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
     <div data-role="header">
        <h1>My page</h1> 
    </div> 	
    <div role="main" class="ui-content">
        <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>
    </div>  
</div>

JavaScript

$(document).on("pagecreate", "#page1", function(){
    $(".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);
        }
    });
});