How to define a visible heading for details element in HTML5 ?
Last Updated :
22 Mar, 2021
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
< 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 >
< details open>
< summary >Heading Summary One</ summary >
This is the content for heading one. The
content outside the < summary > tag
is displayed here.
</ details >
< details >
< summary >Heading Summary Two</ summary >
This is the content for heading two. The
content outside the < summary > tag
is displayed here.
</ details >
< details >
< 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:
visible heading
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...