This is a standard expand/collapse widget using native HTML `<details>` and `<summary>` tags.
This content will be shown or hidden when the summary is clicked.
It can contain any HTML elements you wish.
An expand/collapse widget allows users to reveal or hide sections of content on a webpage. This helps in managing screen real estate and presenting information efficiently.
This example utilizes the native HTML <details> and <summary> elements. No JavaScript is required for the core functionality, making it very performant and accessible by default.
The <summary> element acts as the visible title, and when clicked, it toggles the visibility of the content following it within the <details> tag.
Yes, by adding the open attribute to the <details> tag, like this example, the widget will be expanded when the page loads.
This is the outer content.
This content is nested inside another expand/collapse widget!
Nesting widgets can help organize complex information hierarchies.
More outer content after the nested widget.