title: Javascript code for collapsing HTML Blocks is not running
body: <p>I tried to code some javascript to collapse specific HTML blocks. It is working when I try it in a HTML file on my local computer and the javascript code in a script block. But when I try to use it on my Joomla Website (the template allows me to insert my own javascript via a custom.js file), I can find the javascript code in the source code but it won't run. Does anybody have an idea?</p>
  <p>This is the Code:</p>
  <pre><code>var coll = document.getElementsByClassName(&quot;oc-button&quot;);
  var i;
  
  for (i = 0; i &lt; coll.length; i++) {
    coll[i].addEventListener(&quot;click&quot;, function () {
      collaps = document.getElementsByClassName(&quot;oc-collaps&quot;);
      for (j = 0; j &lt; collaps.length; j++) {
        if (collaps[j].style.display === &quot;block&quot;) {
          collaps[j].style.display = &quot;none&quot;;
        }
      }
  
      id = this.getAttribute(&quot;href&quot;);
      this.classList.toggle(&quot;active&quot;);
      var content = document.getElementById(id);
  
      if (content.style.display === &quot;block&quot;) {
        content.style.display = &quot;none&quot;;
      } else {
        content.style.display = &quot;block&quot;;
      }
    });
  }
  </code></pre>
  <p>Here is a screenshot of the header part where the custom.js file is listed.
  <a href="https://i.stack.imgur.com/8byWE.png" rel="nofollow noreferrer">Screenshot</a></p>