Collapse

Collapses allow users to toggle the visibility of content.

On this page:

Best Practices

Collapses give users control over how much information they see at one time.
A common use of Collapses is for a “Question and Answer” item on a FAQ page.
Use the native HTML tag for Details disclosure Element as Collapses whenever possible.

Usage

What is the question and does it wrap when necessary?

Answer this question with an expandable answer section. We can feature as many questions as we need to ensure the user has a good understanding.

<div class="card">
  <div class="card-body">
    <details>
      <summary class="text-ui-priority">What is the question and does it wrap when necessary?</summary>
      <div class="mt-2">
        <p>Answer this question with an expandable answer section. We can feature as many questions as we need to ensure the user has a good understanding.<p>
      </div>
    </details>
  </div>
</div>

Resources

Page top