Articles → HTML 5 → Summary And Detail Tags In Html5
Summary And Detail Tags In Html5
Purpose
Syntax
<details>
<summary></summary>
<!--Content to be showed or hidden-->
</details>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Summary and Details Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap\css\bootstrap.min.css">
</head>
<body>
<details>
<summary>Trade fair in Delhi (Click for more details)</summary>
<p>Venue: Pragati Maiden</p>
<p>Date: 14 November</p>
</details>
</body>
</html>
Try It
Output
Click to Enlarge
Browser Support
| Tag | Internet Explorer | Firefox | Chrome | Safari | Opera | Edge |
|---|
| Summary | Not supported | 48.0 | 12.0 | 6.0 | 15.0 | Not supported |
| Detail | Not supported | 49.0 | 12.0 | 6.0 | 15.0 | Not supported |
Video