Accordion

Standard Accordion

To create an accordion, wrap one or more details elements in a div with the class accordion.

Section 1

Content for section 1

Section 2

Content for section 2

Section 3

Content for section 3

<div class="accordion">
  <details>
    <summary>Section 1</summary>
    Content for section 1
  </details>
  <details>
    <summary>Section 2</summary>
    Content for section 2
  </details>
  <details>
    <summary>Section 3</summary>
    Content for section 3
  </details>
</div>

Single Panel

To create a single collapsible panel, follow the same pattern, only using one details element.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="accordion">
  <details>
    <summary>Hello World</summary>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
  </details>
</div>

Multiple Panels (Exclusive)

To create an accordion with multiple panels where only one panel can be open at a time, add a name attribute to each details element inside the accordion.

Make sure to use the same name for all the details elements within a given accordion, and that no two accordions share the same name.

Hint: this behavior is similar to how you group radio buttons.

Section 1

Content for section 1

Section 2

Content for section 2

Section 3

Content for section 3

<div class="accordion">
  <details name="accordion-1">
    <summary>Section 1</summary>
    Content for section 1
  </details>
  <details name="accordion-1">
    <summary>Section 2</summary>
    Content for section 2
  </details>
  <details name="accordion-1">
    <summary>Section 3</summary>
    Content for section 3
  </details>
</div>

Subtle

You can use a borderless subtle variant by adding the subtle class in addition to the accordion class.

Section 1

Content for section 1

Section 2

Content for section 2

Section 3

Content for section 3

<div class="accordion subtle">
  <details>
    <summary>Section 1</summary>
    Content for section 1
  </details>
  <details>
    <summary>Section 2</summary>
    Content for section 2
  </details>
  <details>
    <summary>Section 3</summary>
    Content for section 3
  </details>
</div>