-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
jQuery Mobile Cookbook
By :
A collapsible is a container with the data-role="collapsible" attribute. You can add a header and other controls inside collapsible content and only the header is displayed when the collapsible block is collapsed. You can click on the + icon next to the collapsible to expand it. This recipe shows you how to use alternate icons with a collapsible.
Copy the full code of this recipe from the code/04/collapsible sources folder. You can launch this code using the URL http://localhost:8080/04/collapsible/main.html.
In main.html add two collapsible blocks using data-role="collapsible", as shown in the following code. By default, the first collapsible uses the standard icons (plus and minus).
<div data-role="content">
<div data-role="collapsible" data-collapsed="false"
data-theme="c" data-content-theme="c">
<h3>Header of the collapsible element</h3>
The header uses the default plus/minus icons...
Change the font size
Change margin width
Change background colour