Expand/Collapse Widget Demo

Example 1: What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It defines the elements that make up a webpage, such as headings, paragraphs, links, images, and more.

HTML describes the structure of a document semantically and is the foundation for all web pages.

Example 2: How do details work?

Details elements create a disclosure widget where content can be shown or hidden by the user. The browser handles the toggle behavior automatically without requiring additional JavaScript.

Click the header to expand or collapse the content.

Example 3: Accessibility considerations

Using a native details/summary pair provides a semantic disclosure widget that is accessible to screen readers. Ensure the summary clearly describes the hidden content and provide descriptive content within the panel.

Keep the summary concise and informative.
Provide meaningful content inside the details panel.