The accordion is a UI paradigm that consists of several stacked blocks. Each block consists of a label and a content section, clicking on a label either expands or collapses the section.

For a long time, such behavior was only available with a JavaScript implementation or with some CSS workarounds. Until HTML5 came along and introduced the details and summary tags that can be used to create a pure HTML accordion.

The details tag serves as a wrapper for an interactive widget that can be open or closed. A user has to click on the label which is represented by the summary tag to open or close the widget.

Now you can create a pure HTML accordion using nothing but these two tags. It’s a great way to utilize semantic HTML and make an accessible and easily recognizable widget.

<details>
    <summary>What is HTML?</summary>
    <p>HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.</p>
</details>
<details>
    <summary>What is CSS?</summary>
    <p>Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML.</p>
</details>
<details>
    <summary>What is JavaScript?</summary>
    <p>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.</p>
</details>

Result:

Styling and Behavior

Default styling looks pretty similar across the browsers. One particular feature about HTML accordion is that by default the summary tag has a small triangle that changes it direction based on the state of the widget.

The triangle shape inherits the color from the color property of the summary element or the closest parent wich has this property set.

Also you can target the opened state of the widget with the [open] atrtibute selector:

details[open] {
  box-shadow: 0 2px 5px 0 #666;
}

The summary tag is focusable so summary:focus selector can be used to target this state:

summary:focus {
  color: #005fcc;
}

If you’re willing to customize the appearance of the arrow there’s a ::-webkit-details-marker pseudo-element that will hide the arrow:

summary::-webkit-details-marker {
  display: none;
}

To insert another symbol to replace the arrow you can use encoded SVG as a background image.

Note: Unfortunately, at this time there’s no built-in way to animate the transition between open and closed.

Events and API

The details element has an open property attached to its DOM object, which you can read and modify. Modifying it will result in triggering the open or close of the widget.

const details = document.querySelector('details')
details.open = true // will expand the widget

Additionally, the details element supports toggle event. It reacts whenever the widget is collapsed or expanded:

const details = document.querySelector('details')

details.addEventListener('toggle', (e) => {
  console.log(e.target.open) // will log true or false based on the state
})

To add a little more functionality and make a collapsible HTML accordion, a small JavaScript snippet is required.

Assuming we’re using the markup from above, the code snippet selects all details elements and assigns each one a click event handler that checks for the current opened one and that is not the target element and closes it.

  const details = Array.from(document.querySelectorAll('details'))
  
  details.forEach((detail) => {
    detail.addEventListener('click', (e) => {
      const active = details.find(d => d.open)
      if (!e.currentTarget.open && active) {
        active.open = false
      }
    })
  })

Result:

Browser Support

Both details and summary elements are supported in all browsers except IE.