Skip to content

component :: FAQ

The .faq component groups details/summary disclosures into the classic FAQ accordion — native behavior, zero JavaScript.

Does this need JavaScript?

No. The browser’s own details element does all the work.

How does exclusive-open work?

Every item in this group shares name=“demo”, so the browser only keeps one open. Remove the name and items open independently.

Is it keyboard accessible?

Natively: the summary is focusable and toggles with Enter/Space.

File Description Source
component.faq.css Group spacing Github
elements.interactive.css The details/summary styling + chevron Github
Faq.astro, FaqItem.astro The Astro components Github
--faq-spacing in theme.default.ui.css UI token Github

Playground

Does this need JavaScript?

No. The browser's own details element does all the work.

How does exclusive-open work?

Every item shares the same name attribute.

Behavior

Copied!
<div class="faq">
<details class="faq_item" name="faq">
  <summary>Does this need JavaScript?</summary>
  <div class="faq_content">
    <p>No. The browser's own details element does all the work.</p>
  </div>
</details>
<details class="faq_item" name="faq">
  <summary>How does exclusive-open work?</summary>
  <div class="faq_content">
    <p>Every item shares the same name attribute.</p>
  </div>
</details>
</div>

HTML

<div class="faq">
  <details class="faq_item" name="faq">
    <summary>Does this need JavaScript?</summary>
    <div class="faq_content">
      <p>No. The browser's own details element does all the work.</p>
    </div>
  </details>
  <details class="faq_item" name="faq" open>
    <summary>How does exclusive-open work?</summary>
    <div class="faq_content">
      <p>Every item shares the same name attribute.</p>
    </div>
  </details>
</div>

Giving every item the same name makes the group exclusive-open (opening one closes the others). It is a progressive enhancement: browsers that don’t support exclusive accordions simply let several items stay open, which is a perfectly fine FAQ too.

Custom properties

Property Description
--faq-spacing Gap between items.

The item visuals come from the details element styling; there is nothing FAQ-specific to retheme.

Astro component

Faq takes only class and passes everything else to its root <div>. Items go in the default slot.

FaqItem

Prop Type Default Description
question string — The summary text. Required.
open boolean false Render the item open.
name string undefined Same name on every item of a group = native exclusive-open.
class string undefined Additional CSS classes.

The default slot is the answer.

Examples