Javascript DOM HTML Details toggle between open and close

Introduction

Toggle between opening and closing the additional details:

Click the buttons to toggle between opening and closing the additional 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 ww  w. ja  va2  s.com*/
<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>



PreviousNext

Related