HTML <details> tag

The specifies additional details that the user can open and close on demand. In <details> tag we can specifies some extra details.These details can be opened and closed by the user when he requires.
<details> element can be used to display the headings and to hide the details of the headings.We can use this as menus also.
The <summary> tag is used as sub-tagvwith <details> element to specify a visible heading for the details.

Code of <details> tag with <summary> tag:
<html>

<head>

<title>Use of the details Element</title>

<script>

function toggleFun()

{

alert("details expanded");

}//end of function

</script>

</head>

<body>

<h1>Use of details element </h1>

<details ontoggle="toggleFun()">

<summary>Use of details element</summary>

<h3>This is the use of the details element</h3>

<div style="background-color: darkgray; border-radius: 5px; padding: 10px;">

<p>This is the data displayed when you want to know about details of the topic</p>

<p>This is extra data or information about the topic</p>

<dl>

<dt>details element ?</dt>

<dd>details element can be used to display the headings and to hide the 

details of the headings.We can use this as menues also.

</dd>

</dl>

</div>

</details>

<details>

<summary>Web Designing Course</summary>

<div style="background-color:lightslategrey;padding:5px;border-radius: 5px;">

<dl>

<dt>HTML </dt>

<dd>HTML : Hyper Text Markup Language HTML is used to display the content on the 

web page.

</dd>

<dt>CSS</dt>

<dd>CSS:Cascading Style Sheet.
 CSS is used to apply styles to the content of the 

web page. CSS seperates the style from the content of the web page </dd>

</dl>

</div>

</details>

</body>

</html>

HTML

HTML Tutorial

Admission Enquiry Form

HTML <details> tag

Code of <details> tag with <summary> tag:

Output: