Toggle classes with javascript

I have 3 buttons. They all toggle different content with css option display: none; display: flex; With javascript i toggle between the class .show For each button i have a toggle script.

It detects if another button is allready opened but it does not work properly. If i click button 1 and then 2 it works. But if i hit number 3 after that, it removes everything instead of toggle the right class.

Also i find this to be a very long code for something that can most likely be done with less.

Im happy with less code but the point of the question is so that i understand what ive done wrong.

// Button 1  let b1 = document.querySelector(".button1");  let b1_toggle = document.querySelector(".toggle-button-1");  b1.addEventListener("click", function(){      let b2_toggle = document.querySelector(".toggle-button-2");      let b3_toggle = document.querySelector(".toggle-button-3");      let alreadyOpen = false;      if (b2_toggle.classList.contains("show"), b3_toggle.classList.contains("show")) alreadyOpen = true;      b2_toggle.classList.remove("show");      b3_toggle.classList.remove("show");      if (!alreadyOpen)b1_toggle.classList.toggle("show");  });  // Button 2  let b2 = document.querySelector(".button2");  let b2_toggle = document.querySelector(".toggle-button-2");  b2.addEventListener("click", function(){      let b1_toggle = document.querySelector(".toggle-button-1");      let b3_toggle = document.querySelector(".toggle-button-3");      let alreadyOpen = false;      if (b1_toggle.classList.contains("show"), b3_toggle.classList.contains("show")) alreadyOpen = true;      b1_toggle.classList.remove("show");      b3_toggle.classList.remove("show");      if (!alreadyOpen)b2_toggle.classList.toggle("show");  });  // Button 3  let b3 = document.querySelector(".button3");  let b3_toggle = document.querySelector(".toggle-button-3");  b3.addEventListener("click", function(){      let b1_toggle = document.querySelector(".toggle-button-1");      let b2_toggle = document.querySelector(".toggle-button-2");      let alreadyOpen = false;      if (b1_toggle.classList.contains("show"), b2_toggle.classList.contains("show")) alreadyOpen = true;      b1_toggle.classList.remove("show");      b2_toggle.classList.remove("show");      if (!alreadyOpen)b3_toggle.classList.toggle("show");  });

.flex {    display: flex;  }  .button {    background-color: red;    color: white;    padding: 10px 20px;  }  .toggle-button-1 { display: none;}  .toggle-button-1.show { display: flex;}  .toggle-button-2 { display: none;}  .toggle-button-2.show { display: flex;}  .toggle-button-3 { display: none;}  .toggle-button-3.show { display: flex;}

<div class="flex">    <div class="button button1">Button1</div>    <div class="button button2">Button2</div>    <div class="button button3">button3</div>  </div>    <div class="toggle-button-1">Button 1 toggled</div>  <div class="toggle-button-2">Button 2 toggled</div>  <div class="toggle-button-3">Button 3 toggled</div>

https://stackoverflow.com/questions/66072753/toggle-classes-with-javascript February 06, 2021 at 09:35AM