Details open attribute

HTML DOM Details Object

Definition and usage

open whether the additional detail/information attribute is set or returned to be visible to the user (open).

This attribute reflects <details> open attribute.

When set to true, the details will be visible to the user (open).

See also:

HTML Reference Manual:HTML <details> Tag

Example

Example 1

Display additional detail information:

document.getElementById("myDetails").open = true;

Try it yourself

Example 2

Understand whether the user can see (open) additional detail information:

var x = document.getElementById("myDetails").open;

Try it yourself

Example 2

Toggle between opening and closing additional detail information:

function openDetails() {
    document.getElementById("myDetails").open = true;
}
function closeDetails() {
    document.getElementById("myDetails").open = false;
}

Try it yourself

Syntax

Return the open attribute:

detailsObject.open

Set the open attribute:

detailsObject.open = true|false

Attribute value

Value Description
true|false

Specify whether additional detail information should be visible to the user (open).

  • true - Detail information will be visible
  • false - Detail information will not be visible

Technical Details

Return Value: Boolean value, returns true if the details are visible, otherwise returns false.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 Not Supported 49.0 6.0 15.0

Related Pages

HTML Reference Manual:HTML <details> open Attribute

HTML DOM Details Object