Details element event

Recipe 8.2 Create a native disclosure widget

Sample:

Opened: false

Show details

Detailed content goes here…

Code:

Opened: <span>false</span>

<details>
  <summary>Show details</summary>
  
  <p>Detailed content goes here…</p>
</details>

<script>
  const details = document.querySelector('details')

  details.addEventListener('toggle', e => {
    document.querySelector('span').textContent = details.open
  })
</script>