Creating a nested accordion
An accordion
or a collapsible set
is a group of collapsible blocks in a container with data-role="collapsible-set"
. Only one collapsible can be expanded at a time and the other collapsibles go back to their collapsed state. You cannot nest accordions directly. This recipe shows you how to create a nested accordion
in a simple application that displays the various real estate properties available for purchase.
Getting ready
Copy the full code of this recipe from the code/04/nested-accordion
sources folder. You can launch this code using the URL http://localhost:8080/04/nested-accordion/main.html
.
How to do it...
Add a nested accordion to
main.html
usingdata-role="collapsible-set"
as shown in the following code:<div data-role="content"> <h4>Our current housing projects</h4> <div data-role="collapsible-set" data-theme="d" data-content- theme="d"> <div data-role="collapsible" data-collapsed="false"> <h3>Villas...