Create Accordion with Details and Summary (with Animation!)

@ HTML

Introduction

An accordion is a common web UI pattern, typically a series of vertically interactive headings used to toggle the display of further information🔗, and it also has additional names such as:

  • Collapsible
  • Details
  • Expandable

In HTML, the new syntax <details> and <summary> helps us quickly implement similar functionality, along with the new CSS interpolate-size and transition-behavior for smooth open and close animations.

Basic Accordion

HTML has added <details> to allow us to express expandable sections natively, where <summary> represents the title of the section, as shown in the example below:

<details>
  <summary>Section Summary Title Here</summary>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad consectetur nisi repellendus atque. Praesentium mollitia
  sapiente libero aspernatur. Hic ipsa id eveniet sapiente totam soluta exercitationem iusto, quaerat delectus ratione.
</details>

Section Summary Title Here Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad consectetur nisi repellendus atque. Praesentium mollitia sapiente libero aspernatur. Hic ipsa id eveniet sapiente totam soluta exercitationem iusto, quaerat delectus ratione.

Grouped Accordion

To bind multiple accordion states, you can use the same name attribute, which will force only one accordion with the same name attribute to be open at a time:

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>
Section 1

Content for section 1.

Section 2

Content for section 2.

Default Open Accordion

To set a specific accordion item to be open by default, you can use the open attribute:

<details open>
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
Section 1

Content for section 1.

Adding Animation

To select the content of details, you can use the ::details-content🔗 pseudo-element. By setting different heights and transition in the open state, you can animate based on the open and close states.

details::details-content {
  background-color: red;
  height: 0;
  transition: height 1s;
}


details[open]::details-content {
  height: auto;
}

Animate Height: interpolate-size: allow-keyword

You may find that even with the addition of transition, there is no animation for height when the element expands or collapses. In the past, this issue was unsolvable, and we could only use JS to calculate the height and change properties to achieve animation effects. Fortunately, there is now a new experimental CSS syntax: interpolate-size: allow-keywords that helps us calculate animation and transition for properties like auto, fit-content, and max-content. It is a style setting that can be inherited by child elements, so it works whether set at the document root or on individual elements:

:root {
  interpolate-size: allow-keywords;
}

Animate Visibility: content-visibility

You may notice that when collapsing, there is no animation, and it simply disappears. This is because the content visibility is set to ‘hidden’ when the accordion is closed. We also need to set up related animations for this, and it is a discrete🔗 animation! This means there are no intermediate states or values, and you need transition-behavior: allow-discrete to ensure that the switch occurs only after other animations are completed:

transition: height 1s, content-visibility 1s;
transition-behavior: allow-discrete;

Summary

If you follow the steps above, you will have a minimally functional native accordion with nice open and close animations! Additionally, you can check out Kevin Powell’s more refined practice🔗 and his introductory video: Animate details & summary with a few lines of CSS - Kevin Powell🔗

See the Pen details & summary by Riceball ( @riecball) on CodePen.

Further Reading