关于 html/css/js 可折叠内容的问题

Question

I've been looking around on some collapsables, most of them seem to use some extra code that doesn't seem to be needed or I can't understand haha. anyways, I made a super simple one and in my mind and logic it SHOULD work. but apparently it gets the error of

app.js:4 Uncaught TypeError: Cannot read property 'style' of null
    at btn (app.js:4)
    at HTMLButtonElement.onclick (index.html:9)

if someone would be so kind to properly explain to me WHY this isn't working so I might understand the logic better? here is 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

Answer 1

As you have assigned a class name to that element so use querySelector instead of ID selector:

var content = document.querySelector(".content");

Please note that querySelectot returns the first occurance of a query. So if you have multiple elements you will need (querySelectorAll(".blah"))[x] to select the Xth element.

As a JQuery fan, using JQuery you just need 1 line of code:

function btn(){
    $(".content").toggle()
}