Button show/hide div in javascript, toggle not working

Question

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

Prajwal · Accepted Answer · 2020-04-28 02:46:13Z

1

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/

edited Apr 28, 2020 at 2:46

answered Apr 28, 2020 at 2:20

Prajwal

1981 silver badge9 bronze badges

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

2 Comments

Albi Over a year ago

Hi Prajwal, thanks for the response. i tried that and is still the same issue, when you click the next button, the previous div remains open

Prajwal Over a year ago

Try this one. I realized we were doing the same thing still. What we should do is ignore the corresponding content div when the button is clicked. please check the fiddle below jsfiddle.net/sap4bn8d/1

Luís Ramalho · Accepted Answer · 2020-04-28 02:43:28Z

0

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>

edited Apr 28, 2020 at 2:43

answered Apr 28, 2020 at 2:08

Luís Ramalho

10.2k4 gold badges54 silver badges69 bronze badges

5 Comments

Albi Over a year ago

Thanks for the response Luis, but i want that when i click the next button, the previous div to get closed, not just clicking buttons and divs still be open.

Albi Over a year ago

you can re-run the code here and look that is not working, after you click the second button, the first div still remains open

Luís Ramalho Over a year ago

The thing is that it's not the first div, but another div which happens to be exactly the same as the previous one. Check my snippet again please :)

Albi Over a year ago

Hi Luis, i checked it and is ok for the fact that when you click the next button the previous div will close, but the last of them clicked will keep the div open, so you click in the button to close the div back, doesn't work

Luís Ramalho Over a year ago

Albi, please check again. I think you need to change the way you're handling the logic.

Collectives™ on Stack Overflow

Button show/hide div in javascript, toggle not working

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related