Collapse

Collapse shows and hides content behind a title. It can be used to create accordion-like experiences where one or more panels are open at a time. It has no styles of its own, so it can match any UI.

<Collapse>
  <CollapseTitle>Example Collapse 1</CollapseTitle>
  <CollapseContent>Focus the Collapse to show the content.</CollapseContent>
</Collapse>

Components

The Collapse components include the following:

• Collapse
• CollapseTitle
• CollapseContent

Collapse

The Collapse component wraps the below components. Its behavior can be customized using the following props:

CollapseTitle

The CollapseTitle goes inside the Collapse and toggles the state when clicked.

CollapseContent

The CollapseContent holds content and will display when the Collapse is open.

Plain Styles

The Collapse has no background or border, by default. Everything is styleable with utility classes.

Open

Use the open prop to force the Collapse to stay open:

<Collapse open>
  <CollapseTitle class="font-bold bg-base-300">
    Example Collapse Open
  </CollapseTitle>
  <CollapseContent class="bg-base-200">
    This content will always show.
  </CollapseContent>
</Collapse>

Close

Use the close prop to force the Collapse to stay closed:

<Collapse close>
  <CollapseTitle class="font-bold bg-base-300">
    Example Collapse Open
  </CollapseTitle>
  <CollapseContent class="bg-base-200">
    This content will always show.
  </CollapseContent>
</Collapse>

Toggle

Use the toggle prop to toggle open/close state on click. The Collapse will remain open even when losing focus. This example also adds a background color to the entire Collapse using utility classes.

<Collapse toggle class="bg-primary text-primary-content">
  <CollapseTitle>Toggle Content</CollapseTitle>
  <CollapseContent>Hello!</CollapseContent>
</Collapse>

Value

The value prop can be used with Accordion to control multiple Collapse components with a single v-model on the Accordion. See Accordion docs.