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 id="example01">
      <summary class="lead 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

Previous page
Next page