I have been exploring collapsibles and noticed that many of them use extra code that seems unnecessary or confusing. I decided to create a simple one based on my logic, but it's throwing an error:
app.js:4 Uncaught TypeError: Cannot read property 'style' of null
at btn (app.js:4)
at HTMLButtonElement.onclick (index.html:9)
If someone could kindly explain why this isn't working, it would help me understand the logic better. Here is the snippet:
var content = document.querySelector(".content");
function btn(){
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "block";
}
}.content {
display: none;
overflow: hidden;
color: red;
}<button type="button" onClick="btn();">collapsible</button>
<div class="content">
<p> inner content bla bla bla</p>
</div>Thanks in advance! /Thuse