Detecting the opening or closing of a details element

Question

How can I detect when a details element is opened or closed in Javascript? Other than attaching a listener to the click function and checking if the open attribute is set or

Answer 1

To test the current state, without events listeners, we can simply check if the attribute open is set:

// Test
onclick = () => {
  console.log(
    !detailElem.hasAttribute("open")
  )
}

<details id="detailElem">
  <summary>Some details</summary>
</details>