details tag in html5 with example
- The
<details>tag specifies additional details that the user can view or hide on demand. - It can be used in conjunction with the HTML5
<summary>tag to provide a heading that can be clicked on to expand/collapse the details as required. - The content of a <details> element should not be visible unless the open attribute is set.
- The <details> tag is currently only supported in Chrome and in Safari on Mac.
Example 1 :
<html>
<head><title>details tag in html5</title></head>
<body>
<details>
<span>Author : <b>20 Fingers 2 Brains</b></span><br />
<span>language : <b>jQuery</b></span><br />
<span>element : <b>details</b></span>
</details>
</body>
</html>
Demo :
In the above example, we have used details element. It renders a arrow image with Details text. Initially the details are hidden. On click on this image, details specified in the element is shown.
Example 2 : details with open attribute
<html>
<head><title>details tag in html5</title></head>
<body>
<details open="open">
<span>Author : <b>20 Fingers 2 Brains</b></span><br />
<span>language : <b>jQuery</b></span><br />
<span>element : <b>details</b></span>
</details>
</body>
</html>
Demo :
In the above example, the details tag is rendered. We have set the open attribute of details tag to open, that is why initially the details are not hidden.
Example 3 : Details inside another Details element
<html>
<head><title>Details element in html5</title></head>
<body>
<details>
<summary>Movies</summary>
<details>
<summary>Hollywood</summary>
<p>300</p>
<p>Goal</p>
<p>Lord of Rings</p>
</details>
<details>
<summary>pollywood</summary>
<p>3 Idiots</p>
<p>Agneepath</p>
<p>Special 26</p>
</details>
</details>
</body>
</html>
Demo :
In the above example, we have created a detail tag inside another details element. This gives a look of menu list with sub menus.
0 comments:
Post a Comment