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 usingdata-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...