Collapsibles allow you to hide or show content, which is useful for storing parts of information.
To create a collapsible block of content, assign the data-role="collapsible" attribute to a container. Inside the container (div), add a header (H1-H6) or legend element, followed by any HTML markup you want to be expanded:
By default, the content is closed. To expand the content when the page loads, use data-collapsed="false":
Collapsible content blocks can be nested (a collapsible inside a collapsible):
Collapsible content blocks can be nested as many times as you want. |
Collapsible sets are collapsible blocks that are grouped together (often referred to as an accordion). When a new block is opened, all other blocks close.
Create several collapsible content blocks, and then wrap a new container with the data-role="collapsibleset" around the collapsible blocks:
Collapsible popup
How to create a collapsible popup.
Remove rounded corner with the data-inset attribute
How to remove rounded corners and add full width on collapsibles.
Minify collapsibles with the data-mini attribute
How to make collapsibles smaller.
Changing the icon with data-collapsed-icon and data-expanded-icon
How to change the icon of collapsibles (default is + and -).
Changing the icon position
How to change the icon position of collapsibles (default is left).