Question regarding collapsable content with 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

Change getElementById("content"); to querySelector(".content"); You use content class every where but are programming the javascript to look for the id. — imvain2
– imvain2, Commented Oct 2, 2020 at 21:28
You can use the native datails element for that: developer.mozilla.org/en-US/docs/Web/HTML/Element/details — A. Meshu
– A. Meshu, Commented Oct 2, 2020 at 21:30
thanks guys, long day of practice coding and was staring myself blind on stuff i should know. for taking ur time to help +rep — Thuse
– Thuse, Commented Oct 2, 2020 at 21:44
Your new code seems working except that you need to use none instead of block again in else condition. preferably move that querySeelector inside the function and not above the html codes as a global variable. @Thuse — Ali Sheikhpour
– Ali Sheikhpour, Commented Oct 2, 2020 at 21:45

Ali Sheikhpour · Accepted Answer · 2020-10-02 21:33:15Z

2

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()
}

answered Oct 2, 2020 at 21:33

Ali Sheikhpour

11.4k5 gold badges54 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Question regarding collapsable content with html/css/js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related