Let HTML manage the disclosure

Each answer sits inside a details element, with its question in the first summary child. The browser manages opening and closing, so the component needs no custom click handlers or manually synchronised expanded state. That is the disclosure pattern defined by the HTML Standard.

This excerpt comes from the demo:

<details class="faq-item">
  <summary>
    <span>Does this need JavaScript?</span>
    <span class="faq-icon" aria-hidden="true"></span>
  </summary>
  <div class="answer">
    <p>No. The HTML <code>details</code> and <code>summary</code> elements provide the disclosure behaviour. CSS handles the layout, focus treatment and small icon change.</p>
    <p>Use <kbd>Tab</kbd> to reach a question, then <kbd>Enter</kbd> or <kbd>Space</kbd> to open or close it.</p>
  </div>
</details>

The question text supplies the label. The custom plus/minus icon is decorative, so its span has aria-hidden="true". The first answer elsewhere in the demo has open, making it visible initially. Remember that open is Boolean: open="false" still opens it; remove the attribute to close it. MDN explains these attributes.

Keep related answers available

These disclosures deliberately have no shared name attribute. Giving several the same name creates an exclusive group: opening one closes another. Independent answers let a reader compare information without repeatedly reopening it. The trade-off is a longer page when several answers are open; decide according to the content, rather than treating exclusivity as a default.

Essential information, such as opening hours or prices, should also appear where customers need it elsewhere. A collapsed FAQ should not become its only home.

Make keyboard focus easy to see

The entire summary is the control, with padding and a minimum height. The demo adds this focus treatment to summaries and links:

summary:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

Here, --focus is defined as #894409 against the light surfaces. :focus-visible lets the browser decide when focus needs a visible indicator. Check the result after changing colours, and make sure surrounding containers do not clip the outline.

Give long answers room

The wrapper uses width: min(100% - 2rem, 46rem), centred with automatic inline margins. Answers have padding but no fixed height, maximum height or internal scrolling area. Opening one expands normal page flow. Inherited overflow-wrap: anywhere also lets a long unbroken string wrap.

Replace the sample text with realistic content before judging the layout. Try the longest question, several paragraphs and a long link; a short placeholder answer hides problems.

Respect motion preferences

Only the decorative icon transitions, for 150 milliseconds. This existing rule removes that transition when the visitor requests reduced motion:

@media (prefers-reduced-motion: reduce) {
  .faq-icon::after { transition: none; }
}

The media feature reads the device preference. The icon still changes state immediately; the answer itself has no height animation.

Test beyond the happy path

Recorded checks confirmed keyboard focus and Enter activation in Chrome, plus a readable final answer in a signed-out browser at a 390px viewport width. Those checks do not establish universal accessibility.

Before reuse, test Space activation, enlarged text, long answers, multiple open items, reduced-motion settings and the actual parent page layout. Fixed-height sections can constrain an otherwise flexible component. Check the browsers and assistive technologies your audience uses: MDN notes browser differences in summary semantics. No screen-reader audit or WCAG conformance claim is made for this demo.

Prepared with AI assistance using the demo source and linked documentation.

Author: Stormy Studios, a web design and development studio in Cornwall.