Creating interactive accordions with `<details>` and `<summary>` tags.

The <details> and <summary> elements are a powerful, native way to create interactive accordion components on the web and don’t need a single line of JavaScript to work.

These elements are perfect for building FAQ sections, accordions for content, and any UI element that requires being toggled open and closed.

Look ma no JavaScript!

What are `<details>` and `<summary>`?

<details>: this is a container that can be toggled open or closed.
<summary>: the visible label or heading users will see and click to expand/collapse the content.

Basic example

<details>
  <summary>What is this?</summary>
  <p>This is a native HTML disclosure widget.</p>
</details>

What does this do?

The <summary> is always visible.
Clicking it toggles the rest of the <details> content.
The browser handles state, accessibility, and interaction.

Open by default

You can make a <details> element open by default using the open attribute:

<details open>
  <summary>What is this?</summary>
  <p>This is a native HTML disclosure component.</p>
</details>

Styling the elements

Browsers add a default arrow (marker), but you can customize the appearance.

Remove default marker

summary {
  list-style: none;
}

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

Add Ccstom indicator

summary::after {
  content: "➕";
  float: right;
}

details[open] summary::after {
  content: "➖";
}

Creating an accordion

By default, multiple <details> can be open at once. To create an accordion (only one open), you can use the name attribute (supported in modern browsers):

<details name="accordion">
  <summary>Section 1</summary>
  <p>Content 1</p>
</details>

<details name="accordion">
  <summary>Section 2</summary>
  <p>Content 2</p>
</details>

Only one will stay open at a time.

The important bit: accessibility benefits

One of the biggest advantages of using <details> is built-in accessibility:

Keyboard accessible by default
Screen readers understand the expanded/collapsed state
No need for ARIA attributes in most cases

When should you use it?

Great use cases include:

FAQs
Collapsible sections
Progressive disclosure
Settings panels

Avoid using it when:

You need complex animations tied to state
You require full control over open/close logic

Progressive enhancement tip

Even if a browser doesn’t support <details>, the content is still visible—making it a safe, resilient choice.

<details> and <summary> are widely available on Baseline and support most modern browsers on caniuse.

Final thoughts

<details> and <summary> are a great example of how modern HTML can replace JavaScript for common UI patterns. They’re lightweight, accessible, and easy to implement.

If you’re building simple toggles or accordions, start here before reaching for a JS library.

Creating interactive accordions with <details> and <summary> tags.