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

- Acura
- Audi
- BMW
- Cadillac
- Chrysler
- Dodge
- Ferrari
- Ford
- GMC
- Honda
- Hyundai
- Infiniti
- Jeep
- Kia
- Lexus
- Mini
- Nissan
- Porsche
- Subaru
- Toyota
- Volkswagon
- Volvo

## 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

- Adam Kinkaid
- Alex Wickerham
- Avery Johnson
- Bob Cabot
- Caleb Booth

## Formatted text

- Friday, October 8, 2010 2

- ### Stephen Weber

  You've been invited to a meeting at Filament Group in Boston, MA

  Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.

  6:24PM

- ### jQuery Team

  Boston Conference Planning

  In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.

  9:18AM

## Thumbnails and split button

- ### Broken Bells

  Broken Bells

  Purchase album

- ### Warning

  Hot Chip

  Purchase album

- ### Wolfgang Amadeus Phoenix

  Phoenix

  Purchase album

## 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

- Inbox 12
- Outbox 0
- Drafts 4
- Sent 328
- Trash 62

## Calendar

- Friday, October 8, 2010 2

- ### Stephen Weber

  You've been invited to a meeting at Filament Group in Boston, MA

  Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.

  6:24PM

- ### jQuery Team

  Boston Conference Planning

  In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.

  9:18AM

- Thursday, October 7, 2010 1

- ### Avery Walker

  Re: Dinner Tonight

  Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!

  4:48PM

- Wednesday, October 6, 2010 3

- ### Amazon.com

  4-for-3 Books for Kids

  As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.

  12:47PM

## Contacts

- Adam Kinkaid
- Alex Wickerham
- Avery Johnson
- Bob Cabot
- Caleb Booth
- Christopher Adams
- Culver James

## 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

- Canary
- Cat
- Dog
- Gerbil
- Iguana
- Mouse

## Farm animals

- Chicken
- Cow
- Duck
- Horse
- Pig
- Sheep

## Wild Animals

- Aardvark
- Alligator
- Ant
- Bear
- Beaver
- Cougar
- Dingo

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

### More in this section

- Listviews
- List basics & API
- Basic linked list
- Nested list
- Numbered list
- Split button list
- List dividers
- Autodividers
- Count bubble
- Thumbnails
- Icons
- List formatting
- Inset styled lists
- Search filter bar
- Inset search filter bar
- Search filter with dividers
- Search filter hidden data
- Read-only lists
- Read-only inset lists
- Lists with forms
- Inset lists with forms
- Collapsible lists
- List performance test
- Theming lists