Uncaught Typeerror: Cannot Read Property 'style' Of Null At Htmlbuttonelement.

The following code, meant for a collapsible text is throwing out the following error: Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement. the line where

Solution 1:

The button is the only child of the p element. So there is no nextElementSibling. You could either remove the p element or set levcontent to this.parentElement.nextElementSibling.

Furthermore I found a little typo: You used content.scrollHeight instead of levcontent.scrollHeight in the else block.

Here is the modified and working code:

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

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("lev-active");
    var levcontent = this.parentElement.nextElementSibling;
    if (levcontent.style.maxHeight){
      levcontent.style.maxHeight = null;
    } else {
      levcontent.style.maxHeight = levcontent.scrollHeight + "px";
    } 
  });
}

.collapsible {
    height: 40px;
    background-color: #444;
    color: white;
    cursor: pointer;
    padding: 0px10px0px10px;
    margin: 2%4%2%4%;
    width: 93%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    text-transform: capitalize;
}

.lev-active, .collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.lev-active:after {
    content: "\2212";
}

.levcontent {
     padding: 018px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
     background-color: #f1f1f1;
}

<p><buttonclass="collapsible">Levering</button></p><divclass="levcontent"><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>