In this article, we will learn how to define a visible heading for the <details> element. This element is used to create a widget that reveals information when it is in the “open” state. The state can be toggled by clicking on the element. The contents that have to be revealed are enclosed within the <details> tag.
Approach: The <summary> tag is used to define the heading that would be visible regardless of the widget state. When the first child of the <details> element is the <summary> element, then the content of this tag is used to display the label for the widget.
Syntax:
<details> <!-- Define the heading to be displayed --> <summary>Heading Summary One</summary> This is the content for heading one. </details>
Example: The below examples illustrate the <summary> tag to define the heading of the <details> element.
< html >
< head >
< style >
details {
padding: 10px;
border: 2px solid;
}
summary {
cursor: pointer;
outline: 0;
padding-bottom: 10px;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >
How to define a visible heading for
a < details > element in HTML5?
</ h3 >
<!-- Define the <details> element -->
< details open>
<!-- Define the heading to be displayed -->
< summary >Heading Summary One</ summary >
This is the content for heading one. The
content outside the < summary > tag
is displayed here.
</ details >
<!-- Define the <details> element -->
< details >
<!-- Define the heading to be displayed -->
< summary >Heading Summary Two</ summary >
This is the content for heading two. The
content outside the < summary > tag
is displayed here.
</ details >
<!-- Define the <details> element -->
< details >
<!-- Define the heading to be displayed -->
< summary >Heading Summary Three</ summary >
This is the content for heading three. The
content outside the < summary > tag
is displayed here.
</ details >
</ body >
</ html >
|
Output: