How to fix the javascript execution error in blogger

Question

<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>

When I am using this code in blogger this shows:-

"org.xml.sax.SAXParseException; lineNumber: 301; columnNumber: 16; The content of elements must consist of well-formed character data or markup. " Here is the image

Please help me how to fix this problem

Answer 1

Even just looking at the syntax coloring that you provided in your image, the < is giving you problems in this line, line 301:

for (i = 0; i < coll.length; i++) {

The parser is interpreting < as the start of a tag, and expects a tag name and an end tag >. However, I'm guessing you are trying to use it as the JavaScript "less than" operator.

In that case, escape < as <.

In otherwords, replace that line with:

for (i = 0; i < coll.length; i++) {