- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <details> tag
The HTML <details> tag is used to create a disclosure widget that contains some information, and is visible when the widget is toggled to the open state. A summary (or label) should be provided using the HTML <summary> tag.
A disclosure widget is represented onscreen using a small black triangle that rotates to indicate open and closed status, with labels next to the triangles. The content of the summary is used as a label for the disclosure widget.
Syntax
Following is the syntax of the <details> tag −
<details>.....</details>
Example
The following program is showing the usage of the HTML <details> tag.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML details tag</title> </head> <body> <!--create details tag--> <p>Click on the below label to open the details.</p> <details> <summary>Open</summary> You clicked on label(i.e. summary). </details> </body> </html>
When we run the above code, it will generate an output consisting of the text along with a dropdown menu. When the user, click on that menu, it displays its internal text.
Example
Here, we are using the 'open' attribute within the 'details' element to set the details content should be visible after the webpage is loaded.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML details tag</title> </head> <body> <!--create details tag--> <p>HTML 'details' element example.</p> <details open> <summary>Open</summary> You have used the 'open' attribute, so by default, it opened already. </details> </body> </html>
On running the above code, the output window will pop up, consisting of the text along with a dropdown menu text displayed as soon as the page loads.
Example
Let's look into the following example, we're creating a disclosure widget, using the HTML <details> tag to add additional information that users can toggle open and close. We use CSS for styling with the <details> tag.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML details tag</title> <style> details { border: 1px solid blue; border-radius: 10px; padding: 4px; color: green; } details[open] { padding: 1px; } details[open] summary { border-bottom: 1px solid black; margin-bottom: 5px; color: red; } </style> </head> <body> <!--create details tag--> <p>HTML 'details' element example.</p> <details> <summary>Open</summary> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam natus porro ad fugit consectetur hic molestiae. Atque est illum error ullam? Nihil, vero est. Hic ab doloremque minus modi unde. </details> </body> </html>
When we run the above code, it will generate an output consisting of the text along with a dropdown menu applied with the CSS diplayed on the webpage
To Continue Learning Please Login
Login with Google