Log in

CSS Accordion Without JavaScript: Using details and summary

By Purely CSS · Published October 9, 2026

You can build an accordion with no JavaScript by using the HTML details and summary elements. The browser handles opening, closing and keyboard support for you, and CSS only has to style it. This is also the most accessible approach, because the behavior is built into the platform.

1. A styled accordion with a plus icon

Each question is a details element with a summary as the clickable heading. Remove the default marker, add your own plus sign with ::after, and rotate it when the item has the open attribute.

<div class="acc">
  <details open>
    <summary>What is pure CSS?</summary>
    <p>Components built with only HTML and CSS, with no JavaScript.</p>
  </details>
  <details>
    <summary>Is it free to use?</summary>
    <p>Yes. You can browse, copy and use the code at no cost.</p>
  </details>
</div>

2. Only one item open at a time

Give several details elements the same name attribute and the browser closes the others automatically when one opens. This is supported in current Chrome, Edge, Safari and Firefox. In older browsers the items simply open independently, which still works.

<div class="acc">
  <details name="faq" open>
    <summary>Step one</summary>
    <p>Write your HTML.</p>
  </details>
  <details name="faq">
    <summary>Step two</summary>
    <p>Style it with CSS.</p>
  </details>
  <details name="faq">
    <summary>Step three</summary>
    <p>Copy it into your project.</p>
  </details>
</div>

Tips

  • Keep summary text short and descriptive. It doubles as the button label for assistive technology.
  • Do not hide content that search engines or users truly need behind an accordion. FAQ answers are fine.
  • Add a visible :focus-visible style on summary so keyboard users can see where they are.

Common questions

How do I make an accordion with only CSS and HTML?

Use the details element for each item and summary for its heading. The browser toggles it open and closed, and CSS styles the marker and open state.

Can only one accordion item be open at a time?

Yes. Give the details elements the same name attribute, and the browser closes the others when one opens.

Is details and summary accessible?

Yes. It is built into the browser, with keyboard support and the right semantics, which makes it a good default for accordions.

Want more examples?

Browse the full collection of pure CSS accordions, or try your own code in the playground.

More guides