HTML5: How to define a visible heading for a details element?

Last update on February 14 2024 12:55:31 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to define a visible heading for a details element</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<details><!-- Details element, used for creating collapsible content -->
<summary>w3resource</summary><!-- Summary element, visible heading for the details -->
<p> - w3resource is a free, open-source tutorial.</p><!-- Paragraph element with text about w3resource -->
<p>you will learn with HTML5 tutorial of w3resource</p><!-- Paragraph element with additional information -->
</details><!-- End of details element -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a collapsible content section using the <details> element.
Inside the <details> element, a <summary> element is used to define a visible heading for the collapsible content.
The text "w3resource" inside the <summary> tags will be displayed as the heading for the collapsible content.
Below the <summary> element, there are two <p> elements containing additional information about w3resource.
When the webpage is loaded, the content inside the <details> element will be initially hidden, and users can click on the summary to expand and view the content.
This pattern is commonly used for creating expandable sections of content, such as FAQs or additional details.

Live Demo:

See the Pen style-type-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page