HTML collapsible text not working with JavaScript

[Xakzi]

Hello!

I have the following codes;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #14324d;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #5ba4e5;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
</style>

</head>
<body>

<h2>Collapsibles</h2>

<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<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.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>

But the class "Content" does not change display to block when clicked on, I get this error:

[COLOR="#FF0000"]Uncaught TypeError: Cannot read properties of null (reading 'style')[/COLOR]

I don't really understand why as I have tried this code via
www.w3schools.com
and it works fine, but when I try to implement it on an site the error appears. what have I missed?



Ah!

Fixed it by changing the script a little ..

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

for (i = 0; i < collqa.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
   const collection = document.getElementsByClassName("content");
    if (collection[0].style.display === "block") {
      collection[0].style.display = "none";
    } else {
      collection[0].style.display = "block";
    }
  });
}
</script>

 

[bog7]

Also, maybe it's a typo but in your solution I don't see where you're defining the variable collqa which you reference in for loop condition.

 

[Xakzi]

Also, maybe it's a typo but in your solution I don't see where you're defining the variable collqa which you reference in for loop condition.

Hi! Thanks for your answer.
Ah that was a typo from my side when doing this thread, it did say coll.length.

I figured out the problem actually, I did totally forgot that when doing some code changes on a platform that already uses built in solutions most of this are ignored.

I only had to create the div's with the right classes on the platform I was working at to make it work.

The code does actually work without any problems, just not on the platform I was using.

It was wrong of me not to mention this in the OT

 

[bog7]

Yes gotta make sure to add your classes to elements, and also make sure any elements that are affected by your JS are loaded to the DOM before the script runs (if that ever becomes a problem for a slow loading page, you can look into "defer" attribute for externally loaded script).