Build a CSS-only accordion without JavaScript

Choose a disclosure for secondary information

An accordion is useful when readers need to scan a set of questions and open the answers that matter to them. It is less suitable for a short page where every answer is essential. Keep required setup instructions outside collapsed panels so the page remains understandable before anyone interacts. In this example, the questions concern a real decision: whether to use the core CSS or a standalone component pack.

Start with native HTML

Each details element owns a summary and its answer. The browser supplies the open state and keyboard activation. Add the sl-details class for borders, spacing and a right-aligned indicator, then use sl-stack and sl-gap-4 to separate the panels. There is no hidden checkbox or click handler. The first panel has the boolean open attribute to make its answer visible initially; open="false" would still count as open.

Try the working example

Edit the HTML or change preview width to explore the behavior.

Live preview

Do I need a build tool?

No. Copy the core stylesheet into your site and link it in the document head.

Can I load only button styles?

Yes. Use the standalone buttons pack instead of the full core.

View HTML / PlaygroundHTML source

example.htmlHTML

<section class="sl-stack sl-gap-4" aria-label="Installation questions">
  <details class="sl-details" name="tutorial-faq" open>
    <summary>Do I need a build tool?</summary>
    <p>No. Copy the core stylesheet into your site and link it in the document head.</p>
  </details>
  <details class="sl-details" name="tutorial-faq">
    <summary>Can I load only button styles?</summary>
    <p>Yes. Use the standalone buttons pack instead of the full core.</p>
  </details>
</section>

HTML source · enable JavaScript for the playground10 lines · UTF-8

Choose single-open or independent panels

Give the panels the same name when you want one open at a time in browsers supporting grouped details. Use a different name for each separate accordion group on a page. To let readers compare several answers, remove name from the panels so each can remain open independently. The text and controls stay in the same document in either configuration.

Verify keyboard, motion and browser fallback

Tab to each summary and activate it with Enter or Space. Check that focus stays visible and the question still has a complete name. Avoid putting another button inside summary. Current StyloftCSS transitions enhance supported browsers, while native opening and readable content remain the fallback. Test with reduced motion and a screen reader; CSS animation support does not establish that a disclosure is accessible in every application.

Check your result

Open the second panel: the first should close when grouped details is supported.
Remove name from both panels to try multiple-open behavior.
Disable JavaScript and verify the controls still work.

Browser reference: MDN documentation. See the project browser-support notes before depending on newer enhancements.