Detecting the opening or closing of a details element

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 not.



You can do something like this:

<details id="element">

   var isOpen = ($("#element").attr("open") == "open");

   alert ("Open = " + isOpen);

You can use the toggle event:

var details = document.querySelector("details")

details.addEventListener("toggle", function() {
 details.firstChild.textContent = "done"
<!doctype html>
 <summary>toggle event</summary>


In jQuery you can catch the event using .on('toggle') like this:

$('#detail-id').on('toggle', function() {


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.