CODEWITHSUNDEEP
javascripthtmlcssbuttonshow
Albi
Albi

Reputation: 43

Button show/hide div in javascript, toggle not working

I have this html code:

<div class="feedback-middle">
  <button id="btn-1" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-1-content" class="aa">ssss</div>

  <button id="btn-2" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-2-content" class="aa">ssss</div>

  <button id="btn-3" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-3-content" class="aa">ssss</div>
</div>

and the CSS code:

#btn-1-content,
#btn-2-content,
#btn-3-content {
  display: none;
}

.show {
  display: block !important;
  height: 100px;
  background: #303030;
  width: 40%;
}

and the js code:

var buttons = document.querySelectorAll(".bt1");
var content = document.querySelectorAll(".aa");

function remove() {
  content.forEach((item) => item.classList.remove("show"));
}

buttons.forEach((item) =>
  item.addEventListener("click", function (e) {
    remove();
    const contents = document.querySelector(`#${this.id}-content`);
    contents.classList.toggle("show");
  })
);

So the problem with this one is that, when i click the button for the first time, i get the div open below, but when i click it for the second time i want the div to get closed, but it doesn't

Upvotes: 4

Views: 1226

Answers (2)

Prajwal
Prajwal

Reputation: 198

Turns out I didn't understand the question properly. The problem is, you're removing the show class from all the content divs in the remove() function. Then you're adding the show class again to the corresponding content div which doesn't actually toggle the content.

Simple fix. Inside the remove() function, only remove the show class if the div already has it. here's a fiddle https://jsfiddle.net/sap4bn8d/

Update We forgot to ingore to remove the show class if the corresponding content is already shown. Here's the fix: https://jsfiddle.net/sap4bn8d/1/

Upvotes: 1

Lu&#237;s Ramalho
Lu&#237;s Ramalho

Reputation: 10208

In order to achieve what you're looking for you'll have to change the logic a little bit. Basically, you'll have to toggle the show for the content that corresponds to the button clicked, then you'll have to remove all the show from the contents that don't have the same id as the button.

See the snippet below, now all the contents but the one that was not clicked close, and if it just so happens that you click the same button again, it will toggle its content.

var buttons = document.querySelectorAll(".bt1");
var contents = document.querySelectorAll(".a");

buttons.forEach((item) =>
  item.addEventListener("click", function(e) {
    const content = document.querySelector(`#${this.id}-content`);
    content.classList.toggle("show");

    contents.forEach((item) => {
      if (!item.id.startsWith(this.id)) {
        item.classList.remove("show");
      }
    });
  })
);
#btn-1-content,
#btn-2-content,
#btn-3-content {
  display: none;
}

.show {
  display: block !important;
  height: 100px;
  background: #ccc;
  width: 40%;
}
<div class="feedback-middle">
  <button id="btn-1" class="bt1"><p class="b1">What is netflix</p></button>
  <button id="btn-2" class="bt1"><p class="b1">What is netflix</p></button>
  <button id="btn-3" class="bt1"><p class="b1">What is netflix</p></button>
</div>
<div id="btn-1-content" class="a">A</div>
<div id="btn-2-content" class="a">B</div>
<div id="btn-3-content" class="a">C</div>

Upvotes: 0

Related Questions