Collapsible lists

Listviews can be used together with the collapsible widget. The framework makes them exactly fit inside the generated content container of the collapsible. If a data-content-theme has been set (which adds a border to the content container), the framework removes the bottom border of the last list item and adjusts its corner styling.

Inset, individual collapsible

This is an example of a listview wrapped in a container with data-role="collapsible".

Inset, collapsible set

You can also use listviews inside a collapsible set (accordion) to visually group the list and ensure that only a single item can be open at once. The example below shows a collapsible set with various listviews inside.

Non-inset, collapsible set

Setting data-inset="false" on a collapsible or a collapsible set makes the collapsible full width (non-inset), like a full width listview.

Non-inset, individual collapsibles

This is an example of a series of individual collapsibles that are full width (non-inset) with listviews inside. Multiple collapsible rows can be open at once since each is an individual collapsible. Here, each collapsible also has a custom icon.

To avoid "double" borders the framework removes the top border of collapsibles that are immediately preceded by another collapsible. To negate this you can add the following rule to your custom CSS:

.ui-collapsible .ui-collapsible-heading .ui-btn { border-top-width: 1px !important; }