Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Details open property
The HTML DOM Details open property is associated with the HTML <details> open property. It is a boolean attribute and used for specifying whether the details should be visible to the user or not. When set to true the details are visible to the user. However, while setting it to false means hide the details from the user.
Syntax
Following is the syntax for −
Setting the details open property −
detailsObject.open = true|false
Here, true=Details will be shown and false=Details will be hidden. The details are hidden by default.
Example
Let us look at an example for the Details open property −
<!DOCTYPE html>
<html>
<body>
<h2>Details open() property</h2>
<details id="Details1">
<summary>Eiffel Tower</summary>
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p>
</details>
<p>Click the below button to set the details to be visible to the user</p>
<button onclick="setDetail()">Visible</button>
<script>
function setDetail() {
document.getElementById("Details1").open = true;
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the “Visible” button −
In the above example −
We have created a <details< element with id “Details1” and it has the <summary< and a <p< element containing some text inside it −
<details id="Details1"> <summary>Eiffel Tower</summary> <p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p> </details>
We have then created the button “Visible” that will execute the setDetail() function when clicked by the user −
<button onclick="setDetail()">Visible</button>
The setDetail() function gets the <details> element using the getElementById() and sets its open attribute value to true. This displays the information inside <details> to the user −
function setDetail() {
document.getElementById("Details1").open = true;
}
60 Views
