Javascript Reference - HTML DOM Details open Property

This open attribute controls if the details element is visible to user.

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

The open property sets or gets whether details should be visible to the user, or not.

Browser Support


`open`	Yes	No	No	Yes	Yes

Syntax

Return the open property:

var o = detailsObject.open ;

Set the open property:

detailsObject.open=true|false

Property Values

Value	Description
true\|false	Specifies whether additional details should be visible to the user.

Return Value

Returns true if the details are visible, otherwise it returns false.

Example

The following code shows how to show additional details from Javascript code.


<!DOCTYPE html>
<html>
<body>
<details id="myDetails">
  <summary>summarys</summary>
  <p>detailed</p>
  <p>test.</p>
</details><!--from w w w  . j  a  v a  2  s  .c o  m-->
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDetails").open = true;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get if details are visible.


<!DOCTYPE html>
<html>
<body>
<details id="myDetails" open>
  <summary>summary</summary>
  <p>test</p><p>test</p>
</details><!--from www . java2s  .co  m-->
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myDetails").open;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to toggle details.


<!DOCTYPE html>
<html>
<body>
<details id="myDetails">
  <summary>summary</summary>
  <p>test</p><p>test</p>
</details><!--from ww w  . j  av  a  2  s  .  co m-->
<button onclick="openDetails()">Open details</button>
<button onclick="closeDetails()">Close details</button>
<script>
function openDetails() {
    document.getElementById("myDetails").open = true;
}

function closeDetails() {
    document.getElementById("myDetails").open = false;
}
</script>
</body>
</html>

The code above is rendered as follows: