a blog for those who code

Saturday 15 August 2015

Details and Summary Elements in Html5

In this post we are going to discuss about <details> and <summary> elements in Html5. These elements are have been introduced for displaying the fold-able zone in an HTML document. The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view and hide the details. This is like a accordion with fold-able content. With this tag you can hide some of the long content and display only the summary.

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.

1 comment:

  1. 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