- 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 - open Attribute
The open attribute is an HTML attribute that indicates or specifies whether the details of the contents of <details> element, are currently visible.
This attribute is a Boolean attribute with two values: "true" and "false." It is true if the open attribute exists within the element but has no value. For false, if we do not pass the open attribute within the element, it means false.
The details are shown when this attribute exists in the <details> element or hidden when this attribute is absent. By default, the absence of this attribute indicates that the details are not visible.
Syntax
Following is the syntax of the open attribute −
<details open="true | false">
Where true and false are optional values, we can either directly pass the open or pass the open along with the values true and false.
Example
In the following example, let’s demonstrate the open attribute within the <details> element as follows −
<!DOCTYPE html> <html> <body> <h1 style="color: green;">tutorials <span style="color: black">point</span> </h1> <h2> HTML open attribute </h2> <details open> <summary>Open</summary> <p> Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended. </p> </details> </body> </html>
On running the above code, the output window will pop up displaying the text along with a summary tag on the webapge.
Example
Considering the another scenario, where we are not passing the open attribute within the <details> element. If open attribute does not exist within the <details> element, then by default content will be hidden.
<!DOCTYPE html> <html> <body> <h1 style="color: green;">tutorials <span style="color: black">point</span> </h1> <h2> HTML open attribute </h2> <details> <summary>Open</summary> <p> Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended. </p> </details> </body> </html>
When we run the above code, it will generate an output consisting of the summary tag displayed on the webpage.
To Continue Learning Please Login
Login with Google