Disclosure Widgets

Hides content until the user toggles its visibility.

Disclosure widgets, or known in HTML as the <details></details> element, makes the page easier to scan by hiding detailed information until the user needs it. Zirconium styles the default <details> element. There is no need to add any class to it.

How much is the salary range for this position?

Salary for this position ranges from $60,000 to $100,000.

<details>
    <summary>How much is the salary range for this position?</summary>
    <div class="section">
        <p class="margin-none">Salary for this position ranges from $60,000 to $100,000.</p>
    </div>
</details>

Disclosure widgets can be opened by default by adding the open attribute.

What are the qualifications for this position?

Applicants must be:

  • Graduate of Computer Science, Information Technology, or similar
  • Has at least a year of working experience
  • Familiar with web technologies
<details open>
    …
</details>

Disclosure groups

Disclosure widgets can be grouped together by putting them inside a div with class .disclosure-group

Details 1
Paragraph 1
Details 1

Paragraph 1

Details 2

Paragraph 2

Details 3

Paragraph 3

Details 4

Paragraph 4

<div class="disclosure-group">
    <details>…</details>
    <details>…</details>
    <details>…</details>
    <details>…</details>
    <details>…</details>
</div>