details tag in HTML5

The <details> tag in HTML5 is used to show the details of the particular topic.
  1. <html>
  2. <body>
  3. <details>
  4. <summary>C# Corner</summary>
  5. <p>Premier community for C#, ASP.NET, Silverlight, WPF, Windows Phone, Windows Forms and .NET tutorials, articles, blogs, forums, news, and resources.</p>
  6. </details>
  7. </body>
  8. </html>
Here we take a Summary tag. It is used to specify a visible heading for the details.
OUTPUT
1.png
After we click on it:
2.png
New feature in HTML5:
HTML5 introduces the open attribute in the details tag. This property is used when we want the details of the content is always visible to us.
  1. <html>
  2. <body>
  3. <details open="open">
  4. <summary>C# Corner</summary>
  5. <p>Premier community for C#, ASP.NET, Silverlight, WPF, Windows Phone, Windows Forms and .NET tutorials, articles, blogs, forums, news, and resources.</p>
  6. </details>
  7. </body>
  8. </html>
OUTPUT:
2.png
2.png