Javascript Reference - HTML DOM Details Object

The Details class represents an HTML <details> element.

Details Object Properties

Property	Description
open	Sets or gets if the details is visible or not

Standard Properties and Events

The Details object also supports the standard properties and events.

Example

The following code shows how to get a <details> element by using getElementById().


<!DOCTYPE html>
<html>
<body>
<details id="myDetails">there is more</details>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from   w w  w  .j  a va 2 s . c o m-->
    var x = document.getElementById("myDetails");
    x.open = true;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to create a <details> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from   w ww .  j  a  va  2  s. co m-->
    var x = document.createElement("DETAILS");
    var t = document.createTextNode("this is more.");
    x.appendChild(t);
    document.body.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows: