CodesBeautify

HTML Details Generator

Generate details and summary markup for a disclosure widget or a full accordion, with no JavaScript.

HTML1 disclosure
<details>
  <summary>How long does delivery take?</summary>
  <p>Orders leave the warehouse within one working day and arrive in three to five days.</p>
</details>
Runs locally in your browser

About the HTML Details Generator

A <details> element gives you a working show and hide widget with no script at all. The first child must be a <summary>, which becomes the clickable heading; everything after it is the panel that appears when the widget is open. Keyboard support, focus handling and the correct announcement to assistive technology come for free, which is more than most hand rolled accordions manage.

List several comma separated items and you get an accordion. Give them a shared name and they become exclusive, so opening one closes the others, the behaviour that previously needed JavaScript. Support for that attribute is recent, and in an older browser the group simply behaves as independent panels, which is a safe way to degrade.

Two practical points. Content inside a closed <details> is still in the document, so it is indexed by search engines but is not found by the browser find command in most engines, and CSS animation of the open and close is awkward because the element toggles between rendered and not rendered. Do not hide anything essential behind one. The starter CSS adds a border, padding and a pointer cursor on the summary, since browsers style it very plainly by default. Longer help content usually reads better as ordinary sections; see the HTML Code Generator for that shape.

How to use

  1. Write the summary line and the content behind it.
  2. For an accordion, list the item headings separated by commas.
  3. Add a group name to make only one item open at a time.
  4. Tick the CSS box for basic styling, then copy.

Common questions

Does this need JavaScript?
No. The open and close behaviour is built into the browser, and the markup works with a keyboard out of the box.
How do I make only one panel open at a time?
Give every details element the same name attribute, which this generator does when you set a group name.
Is hidden content still indexed by search engines?
Yes, it is in the document either way. What you lose is discoverability, since browser find does not usually reach into a closed panel.
Can I animate the open and close?
Only partly. The element switches between rendered and unrendered, so smooth height transitions need extra CSS or a wrapper.