KPC
Kevin Powell - Community•20h ago
the_paras

What does this JavaScript do?

I'm trying to add a simple collapsing section to my website. I don't know JS at all yet. Does this script reference content only within the same file? That seems to be my problem, but I'm unable to confirm. The function seems to break when I move the CSS to the CSS file rather than having it in the same file as the script. I'm willing to figure out enough JS on my own to fix it, but I'd rather not go through all that effort if that's not even the problem to begin with. It's from W3S https://www.w3schools.com/howto/howto_js_collapsible.asp 
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>
No description
4 Replies
vince
vince•20h ago
You need to import the JS file on each page that has the accordions if that's what you mean <script src="/path/to/js/file" defer></script> inside your <head></head> If you're just importing the JS at the bottom of the body then it also needs to be included in the html file there too; I'd recommend keeping it as a separate file in the head though
Rägnar O'ock
Rägnar O'ock•20h ago
looks like you don't know JS too well, so you might want to use no JS at all for this. You can do so by using the <details> and <summary> elements and adding name attribute to the <details> elements to group them up. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
MDN Web Docs
: The Details disclosure element - HTML: HyperText Markup Language ...
The HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an open state. A summary or label must be provided using the element.
13eck
13eck•20h ago
the_paras
the_parasOP•20h ago
Thanks everyone!

Did you find this page helpful?