The <details> element generates a simple widget to show or hide element contents, by clicking on its child <summary> element. The <summary>...</summary> will be inside a <details>...</details> element. By clicking on the icon at the left of the summary, the content of the <details> will be shown.
Example :
<!DOCTYPE html>
<html>
<body>
<details>
<summary>
Enable GodMode in Windows 10
</summary>
<p>At first you have to create a new folder in the File Explorer.</p>
<p>For the folder name you have to choose GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}.</p>
More at <a href="http://www.codingdefined.com/2015/08/how-to-enable-godmode-in-windows-10.html">How to Enable God Mode in Windows 10
</details>
</body>
</html>
Result :
<details> blocks can be embedded inside one another that means we can create a nested details section.
Browser Support : As of August 2015 <details> element is not supported in Internet Explorer and Firefox. You can check the updated version in CanIUse.
Please Like and Share the Blog, if you find it interesting and helpful.
Hello Admin, this article you have written here is very informative. Thank you for that. I’m into HTML5 courses in Chennai, and articles like these help me to be up to date on the technology. If anyone is interested in HTML5 courses in Chennai can contact us.
ReplyDelete