HTML5: Your visual blueprint™ for designing rich web pages and applications

DECLARE AN INTERACTIVE SUMMARY AND DETAILS LAYOUT ELEMENT

The details and summary elements enable you to display a shortened summary of a larger body, temporarily hiding the detailed content from the display. When the summary is clicked, the complete content becomes visible. For example, you can use these features to summarize an article by displaying only its first paragraph; when the article is clicked, the remaining article paragraphs will appear.

<details>
 <summary>Summarized content...</summary> Detailed content...
</details>

When a web browser sees this code, it knows that the content within the <details> tag group should be hidden by default, except for the content within the <summary> group. When the summary is clicked, the complete ...