Detecting the opening or closing of a details element
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>You can use the toggle event:
var details = document.querySelector("details")
details.addEventListener("toggle", function() {
details.firstChild.textContent = "done"
})<!doctype html>
<details>
<summary>toggle event</summary>
</details>/* Handle for details */
const detailsElements = document.querySelectorAll("details");
function handleClickOnDetails() {
// close all details
let detailsOpened = document.querySelectorAll("details[open]");
for (const item of detailsOpened) {
// keep open only details clicked
if (this != item) {
item.removeAttribute("open");
}
}
}
detailsElements.forEach(function (item) {
item.addEventListener("click", handleClickOnDetails);
});<details>
<summary>Some details 1</summary>
<p>More info about the details.</p>
</details>
<details>
<summary>Some details2 </summary>
<p>More info about the details.</p>
</details>In jQuery you can catch the event using .on('toggle') like this:
$('#detail-id').on('toggle', function() {
//code
});