Handle expand and collapse events
Description
The following code shows how to handle expand and collapse events.
Example
<!--from w w w . j a v a 2 s . co m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
for (var i = 0; i < 4; i++) {
(function (i) {
var element = $("#listElementTemplate").clone();
element.find('h3').append("list Element: " + i);
$("#list").append(element);
element.on('expand', function () {
console.log("expand: "+i);
});
element.collapsible();
element.on('collapse', function () {
console.log("collapse: "+i);
});
})(i);
}
});
//]]>
</script>
</head>
<body>
<div id='listElementTemplate' data-role="collapsible"
data-collapsed='true'>
<h3 class='chart-elem-data'></h3>
<p id=''>Content</p>
</div>
<div data-role="page" class="type-interior">
<div data-content-theme="c" id="list" data-role="collapsible-set"></div>
</div>
</body>
</html>