Collapsible not working in IE

[MCW]

https://www.w3schools.com/howto/howto_js_collapsible.asp

Whenever I use the code modified or direct into an html, it works in Edge, Chrome and Firefox and not in IE.  Any idea what would cause this?

Thanks!

[Ingolme]

I believe that the toggle() method of classList is not supported by Internet Explorer. You can work around that by testing classList.contains() and then using classList.add() or classList.remove() based on whether it already has the class or not.

[MCW]

I am pretty new to this, or several years removed being more like it.  I replaced toggle with contains.  How else would I change this.  Thanks!

 

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll.addEventListener("click", function() {
    this.classList.contains("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

[Ingolme]

contains() is a function which returns true if the element has the class and false if it does not. It is not a direct replacement for toggle(). You have to write code which will check if the class already exists, if it does then use remove(), if it does not then use add().