Jump to content

Collapsible not working in IE


Recommended Posts

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.

Link to post
Share on other sites

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>

Link to post
Share on other sites

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().

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...