Disclosures

Disclosures (<details>/<summary>) provide a way to hide and reveal additional content, making pages cleaner while keeping information accessible. They are ideal for FAQs, explanations, or optional details.

Considerations

Using native <details> ensures built-in keyboard accessibility and allows screen readers to announce expandable content automatically. The <summary> element serves as the visible trigger, while nested content like <dl> or <p> holds the details. Grouping multiple disclosures under the same name (or similar attribute) can support interactive patterns where only one section is expanded at a time, improving usability without extra JavaScript.

This approach leverages semantic HTML, keeps interactions lightweight, and ensures content remains readable even if styles or scripts fail.

Examples

Single Disclosure

<details>
  <summary>What is my tax filing status?</summary>
  <dl>
    <dt>Head of household</dt>
    <dd>
      Choose this option if you are unmarried and pay at least half the cost of
      housing and support for others.
    </dd>
    <dt>Married/domestic partnership</dt>
    <dd>
      Choose this option if you are married or in a domestic partnership and
      have filed separately or jointly.
    </dd>
    <dt>Single</dt>
    <dd>
      Choose this option if you are unmarried and don't qualify for another
      filing status.
    </dd>
  </dl>
</details>

FAQ-style Disclosures

In this example only one disclosure can be open at a time. Other disclosures are auto-collapsed. You can achieve this by giving every grouped <details> element a name attribute with the same value.

<details name="faq-group">
  <summary>What is my tax filing status?</summary>
  <dl>
    <dt>Head of household</dt>
    <dd>
      Choose this option if you are unmarried and pay at least half the cost of
      housing and support for others.
    </dd>
    <dt>Married/domestic partnership</dt>
    <dd>
      Choose this option if you are married or in a domestic partnership and
      have filed separately or jointly.
    </dd>
    <dt>Single</dt>
    <dd>
      Choose this option if you are unmarried and don't qualify for another
      filing status.
    </dd>
  </dl>
</details>
<details name="faq-group">
  <summary>When are taxes due?</summary>
  <p>
    Federal income taxes are typically due on April 15th of each year, unless
    that date falls on a weekend or holiday, in which case the deadline may be
    extended to the next business day.
  </p>
</details>
<details name="faq-group">
  <summary>How should I submit my tax return?</summary>
  <p>
    You can submit your tax return electronically using e-filing services or by
    mailing a paper return to the appropriate IRS address.
  </p>
</details>