Post
Ask Question

Details Tag in HTML5

Introduction

 
The <details> tag is a new tag in HTML 5. The <details> tag specifies additional information or controls about documents that the user can view or hide on demand. The contents of the details tag is hidden by default. The header is visible and could show when the user clicks on the header portion of <details> tag. The contents of the details tag are made visible by adding an open attribute to the <details> tag. The tag can also be used along with the summary tag to make your own header so that the user can expand or collapse the details of the document when required. This tag is only supported by Chrome.
 
Syntax
 
<details open="open">
    <summary></summary>
         <p> </p>
</details>
 

Element-Specific Attribute 

 
Attributes Values Description
open open This Boolean attribute specifies whether the details of the data should be shown to the user or not.
 
HTML5 Event Attributes
onabort onblur oncanplay
oncanplaythrough onchange onclick
oncontextmenu ondblclick ondrag
ondragend ondragenter ondragleave
ondragover ondragstart ondrop
ondurationchange onemptied onended
onerror onfocus onformchange
onforminput oninput oninvalid
onkeydown onkeypress onkeyup
onload onloadeddata onloadedmetadata
onloadstart onmousedown onmousemove
onmouseout onmouseover onmouseup
onmousewheel onpause onplay
onplaying onprogress onratechange
onreadystatechange onscroll onseeked
onseeking onselect onshow
onstalled onsubmit onsuspend
ontimeupdate onvolumechange onwaiting
 
Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.     <body>  
  7.         <details>  
  8.             <summary>Csharpcorner</summary>  
  9.             <p>  
  10.             This is good website to improve your knowledge</p>  
  11.         </details>  
  12.         <br />  
  13.         <br />  
  14.         <details>  
  15.             <summary>Our Network</summary>  
  16.             <a href="http://www.dotnetheaven.com/">.NET Heaven</a>  
  17.             <br />  
  18.             <a href="http://www.c-sharpcorner.com/">C# Corner</a>  
  19.             <br />  
  20.             <a href="http://www.dbtalks.com/">DbTalks</a>  
  21.             <br />  
  22.             <a href="http://www.interviewcorner.com/">Interview Corner</a>  
  23.             <br />  
  24.             <a href="http://www.longhorncorner.com/">Longhorn Corner</a>  
  25.             <br />  
  26.             <a href="http://www.mindcracker.com/">Mindcracker</a>  
  27.             <br />  
  28.             <a href="http://www.vbdotnetheaven.com/">VB.NET Heaven</a>  
  29.             <br />  
  30.         </details>  
  31.         <br />  
  32.         <br />  
  33.         <br />  
  34.         <details open="open">  
  35.             <summary >Csharpcorner</summary>  
  36.             <p>  
  37.             This is good website to improve your knowledge</p>  
  38.         </details>  
  39.         <br />  
  40.         <br />  
  41.         <br />  
  42.         <details >  
  43.             <summary >Calendar</summary>  
  44.             <img src="Image/img.gif" alt="detail tag" />  
  45.         </details>  
  46.         <br />  
  47.     </body>  
  48. </html>  
Output
 
Chrome
 
tag" src="/UploadFile/667ddf/details-tag-in-html5/Images/1.gif" border="0" height="429" width="408">
 
Figure 1
 
As you have seen the third detail tag shows it's content by default because, in the code, I have set the open value for its open attribute.
 
When you click on Csharpcorner or the Our Network header, the content of the detail tag will display like the following figure 2.
 
tag" src="/UploadFile/667ddf/details-tag-in-html5/Images/2.gif" border="0" height="579" width="450">
 
Figure 2
 
Click on Calendar then the image is displayed as content in the detail tag (see the following figure 3).
 
tag" src="/UploadFile/667ddf/details-tag-in-html5/Images/3.gif" border="0" height="633" width="450">
 
Figure 3 


Similar Articles