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.

html_attributes_reference.htm
Advertisements