Javascript DOM HTML Details open Property

Introduction

Show additional details: 

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

Click button to open the details.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<details id="myDetails">
  <summary>Copyright 2020-2024.</summary>
  <p> - by java2s.com. All Rights Reserved.</p>
  <p>All content on this web site are the property of the company.</p>
</details>/*from  w w  w .  j a  v a 2 s . co m*/
<button onclick="myFunction()">Test</button>
<script>
function myFunction() {
  document.getElementById("myDetails").open = true;
}
</script>

</body>
</html>

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

This property mirrors the HTML open attribute.

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

The open property accepts and returns a boolean value.

Property Values

Value Description
true Details will be visible
falseDetails will not be visible

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




PreviousNext

Related