HTML - open Attribute

HTML open is used to 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

<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.

Applies On

Below listed elements allow using of the HTML open attribute

Element	Description
<details>	HTML <details> tag is used to create a disclosure widget that contains some information.

Examples of HTML open Attribute

Below examples will illustrate the HTML open attribute, where and how we should use this attribute!

Details tag with open Attribute

In the following example, let’s demonstrate the open attribute within the <details> element as follows

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<body>
   <h2> HTML open attribute </h2>
   <details open>
      <summary>Open</summary>
   <p> 
      Tutorialspoint provides access to a library 
      of video courses on various prominent technologies, 
      aimed at helping individuals master those technologies 
      and become certified professionals. By becoming a 
      valued member, users can enjoy unlimited access to the 
      library's comprehensive resources and learning materials. 
   </p>
   </details>
</body>
</html>

Details tag without open attribute

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>
<!DOCTYPE html>
<html>
<body>
   <h2> HTML open attribute </h2>
   <details>
      <summary>Open</summary>
   <p> 
      Tutorialspoint provides access to a library 
      of video courses on various prominent technologies, 
      aimed at helping individuals master those technologies 
      and become certified professionals. By becoming a 
      valued member, users can enjoy unlimited access to the 
      library's comprehensive resources and learning materials. 
   </p>
   </details>
</body>
</html>

Supported Browsers

Attribute
open	Yes 12.0	Yes 79.0	Yes 40.0	Yes 6.0	Yes 15.0

html_attributes_reference.htm

Print Page