HTML Disclosure Widgets

Understanding HTML Disclosure Widgets

The HTML <details> and <summary> elements create interactive disclosure widgets that allow users to show or hide additional content.

Browsers provide the basic opening and closing behavior automatically, making disclosure widgets useful for optional explanations, additional information, frequently asked questions, and other content that does not need to remain visible at all times.

The <details> Element

The <details> element creates a disclosure widget containing information that users can reveal or hide. The content is normally collapsed until the user activates its summary.

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the markup language used to structure content on webpages.</p>
</details>

The browser handles the basic interaction without requiring JavaScript, including changing between the collapsed and expanded states.

The <summary> Element

The <summary> element provides the visible label or heading that users activate to open and close the surrounding <details> element.

<details>
  <summary>Learn More About HTML</summary>
  <p>HTML uses elements to describe the structure and meaning of webpage content.</p>
</details>

The summary should clearly describe the hidden content so users can decide whether they want to expand it.

How Disclosure Widgets Work

When a user activates the <summary>, the browser changes the state of the parent <details> element and displays or hides its remaining content.

<details>
  <summary>HTML Tip</summary>
  <p>Choose HTML elements according to the meaning of the content.</p>
</details>

The summary remains visible in both states, while the other content inside <details> is displayed when the widget is open.

The open Attribute

The boolean open attribute makes a <details> element expanded when the page initially loads.

<details open>
  <summary>HTML Elements</summary>
  <p>HTML elements identify different types of webpage content.</p>
</details>

Because open is a boolean attribute, its presence means the disclosure is open. Removing the attribute allows the widget to begin in its normal collapsed state.

Multiple Disclosure Widgets

Multiple <details> elements can be placed on the same page when several independent pieces of information need to be expanded or collapsed.

<details>
  <summary>What is HTML?</summary>
  <p>HTML structures webpage content.</p>
</details>

<details>
  <summary>What is CSS?</summary>
  <p>CSS controls the presentation of webpage content.</p>
</details>

<details>
  <summary>What is JavaScript?</summary>
  <p>JavaScript adds programming and interactive behavior to webpages.</p>
</details>

By default, these disclosures operate independently, so opening one does not automatically close another.

Common Uses

Disclosure widgets are useful when additional information should remain available without occupying space until a visitor chooses to view it.

• Frequently asked questions.
• Additional explanations or examples.
• Optional instructions.
• Troubleshooting information.
• Definitions and supporting details.
• Supplementary information related to the main content.

Important information that users must see or understand should generally not be hidden unnecessarily.

Disclosure Widget Accessibility

Native <details> and <summary> elements provide built-in interactive behavior and keyboard support, making them preferable to recreating a simple disclosure control with generic elements and custom scripting.

Use meaningful summary text that describes the content being revealed. Avoid vague labels such as Click Here or More when a more descriptive label can tell users what they will find inside.

HTML Disclosure Widget Example

The following example demonstrates several disclosure widgets using <details> and <summary>. Open and close the items, add another disclosure, or add the open attribute to see how the browser handles the interaction automatically.

Disclosure Widget Best Practices

• Use <details> when users should be able to reveal or hide supplementary information.
• Provide a meaningful <summary> that clearly identifies the hidden content.
• Use the open attribute when a disclosure should initially be expanded.
• Do not hide information that users need to see immediately.
• Prefer native <details> and <summary> for simple disclosure behavior instead of recreating the same interaction with generic elements.
• Keep the content inside each disclosure focused on the subject identified by its summary.
• Use CSS for visual presentation without removing clear visual cues that the summary is interactive.

Summary

The HTML <details> and <summary> elements provide a native way to create interactive disclosure widgets without requiring JavaScript for their basic behavior.

The <summary> provides the visible control, the remaining content inside <details> is revealed when the widget opens, and the open attribute can make a disclosure expanded initially.