Collapsible lists

Home Search

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

Choose a car model...

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.

Filtered list

Formatted text

Thumbnails and split button

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.

Mailbox

Calendar

Contacts

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.

Pets

Farm animals

Wild Animals

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; }