Collapsible Content Blocks
Description
The markup required to create a collapsible content block is shown in the following code.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Collapsible Block Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head><!--from ww w . j av a2 s . c o m-->
<body>
<div data-role="page" id="home" data-theme="b">
<div data-role="header" data-theme="a">
<h1>Settings</h1>
</div>
<div data-role="content">
<div data-role="collapsible" data-collapsed="true" data-theme="a"
data-content-theme="b">
<h3>Wireless</h3>
<ul data-role="listview" data-inset="true">
<li><a href="#"> Notifications</a></li>
<li><a href="#"> Location Services</a></li>
</ul>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="b">
<h3>Applications</h3>
<ul data-role="listview" data-inset="true">
<li><a href="#"> Faceoff</a></li>
<li><a href="#"> LinkedOut</a></li>
<li><a href="#"> Netflicks</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="a"
data-content-theme="b">
<h3>Display</h3>
<ul data-role="listview" data-inset="true">
<li><a href="#">Brightness</a></li>
<li><a href="#">Auto-rotate screen</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="a"
data-content-theme="b">
<h3>Sound</h3>
<ul data-role="listview" data-inset="true">
<li><a href="#">Sound profile</a></li>
<li><a href="#">Volume</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="a"
data-content-theme="b">
<h3>Security</h3>
<ul data-role="listview" data-inset="true">
<li><a href="#">Set up screen lock</a></li>
<li><a href="#">Visible passwords</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Note
There are two required elements for creating a collapsible block:
Create a container and add the data-role="collapsible" attribute.
We can set the container to be collapsed or expanded
by adding the data-collapsed attribute.
By default, a collapsible section is shown expanded
(data-collapsed="false").
To initially show the section as a collapsed block,
add data-collapsed="true" to the container.
Within the container, add any header element (H1-H6). jQuery Mobile will style the header to look like a clickable button with a left-aligned plus or minus icon to indicate it's expandable.
After the header, we can add any HTML markup to the collapsible block.
We can theme the collapsible block and its associated button
separately by adding the data-theme
and data-content-theme
attributes to the collapsible container.