CSS Accordion Generator

What the generator produces

Each item uses the browser’s native disclosure elements:

<details class="generated-accordion" open>
  <summary>What is included?</summary>
  <div class="generated-accordion__panel">Add the details here.</div>
</details>

The generated CSS styles the border, heading background, text, focus ring, spacing, corners and indicator. It uses logical properties such as margin-inline-start and includes right-to-left indicator rules. A reduced-motion media query removes the icon transition when the visitor requests less motion.

Multiple-open and single-open groups

The single-open option relies on the native details name attribute. Older browsers that do not support exclusive groups still show a usable accordion, but may allow more than one item to stay open.

Safe plain-text content

Headings and panels are treated as text. Characters such as <, >, &, quotes and apostrophes are HTML-escaped in the exported snippet, so a pasted tag is displayed as text rather than becoming executable markup. If a panel needs links, lists or rich formatting, add that trusted markup yourself after exporting.

Accessibility checks before publishing

• Tab to each summary and toggle it with Enter or Space.
• Check the generated focus color against both the heading background and page background.
• Keep headings concise and make the panel answer the heading clearly.
• Test zoom, narrow screens and right-to-left pages in the destination layout.
• Do not hide the page’s primary instruction inside a closed accordion.