Add content in between collapsible
Description
The following code shows how to add content in between collapsible.
Example
<!DOCTYPE html>
<html>
<head>
</head><!-- w w w . j av a 2s . com-->
<body>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<div data-role="page" id="my-page-id">
<div data-role="content">
<div data-role="collapsible">
<h3>1</h3>
<p>One</p>
</div>
<p>Some content inbetween</p>
<div data-role="collapsible">
<h3>2</h3>
<p>Two</p>
</div>
<p>Some content inbetween</p>
<div data-role="collapsible">
<h3>3</h3>
<p>Three</p>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).delegate('#my-page-id', 'pageinit', function () {
var $collapse = $(this).find('[data-role="collapsible"]');
$collapse.bind('expand', function () {
$collapse.not(this).trigger('collapse');
});
});
//]]>
</script>
</body>
</html>