how to toggle display between two different classnames with javascript

Question

I have four filter buttons (I want only two to show at a time) so I gave the first buttons .switch1 and the second buttons .switch2 . Now I have a 'switch filter' button which if the user clicks it should switch .switch1 display:block to none and .switch2 display:none to block .

<div class="switch2">
   <label>Year</label>
   <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
      <option selected>2022</option>
      <option value="1">2021</option>
      <option value="2">2020</option>
      <option value="2">2019</option>
      <option value="2">2018</option>
      <option value="2">2017</option>
      <option value="2">2016</option>
   </select>
</div>
<div class="switch1">
   <label>From:</label>
   <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
</div>
</div>
<div class="month-select col-2">
   <div class="switch2">
      <label>Month</label>
      <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
         <option selected>January</option>
         <option value="1">February</option>
         <option value="2">March</option>
         <option value="2">April</option>
         <option value="2">May</option>
         <option value="2">June</option>
         <option value="2">July</option>
         <option value="2">August</option>
         <option value="2">September</option>
         <option value="2">October</option>
         <option value="2">November</option>
         <option value="2">December</option>
      </select>
   </div>
   <div class="switch1">
      <label>To:</label>
      <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
   </div>
</div>
<div class="ms-5 d-flex flex-column justify-content-end">
   <div class=""><button class="btn-dark px-3 py-1 filterbtn">Filter</button></div>
</div>

This is the screenshot of how the first & second buttons look in my site first buttons second buttons

Answer 1

You can give hidden class to the first set and then toggle that class back and forth

let switchBtn = document.querySelector('button')
let switch1 = document.querySelectorAll('.switch1')
let switch2 = document.querySelectorAll('.switch2')

function switchFilters() {
  let array = [...switch1, ...switch2]
  for (i = 0; i < array.length; ++i) {
    array[i].classList.toggle('hidden')
  }
}

switchBtn.onclick = switchFilters

.hidden {
  display: none;
}

<div class="switch2 hidden">
  <label>Year</label>
  <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
    <option selected>2022</option>
    <option value="1">2021</option>
    <option value="2">2020</option>
    <option value="2">2019</option>
    <option value="2">2018</option>
    <option value="2">2017</option>
    <option value="2">2016</option>
  </select>
</div>

<div class="switch1">
  <label>From:</label>
  <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
</div>

<div class="month-select col-2">
  <div class="switch2 hidden">
    <label>Month</label>
    <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
      <option selected>January</option>
      <option value="1">February</option>
      <option value="2">March</option>
      <option value="2">April</option>
      <option value="2">May</option>
      <option value="2">June</option>
      <option value="2">July</option>
      <option value="2">August</option>
      <option value="2">September</option>
      <option value="2">October</option>
      <option value="2">November</option>
      <option value="2">December</option>
    </select>
  </div>

  <div class="switch1">
    <label>To:</label>
    <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
  </div>

  <div class="ms-5 d-flex flex-column justify-content-end">
    <div class=""><button class="btn-dark px-3 py-1 filterbtn">Filter</button></div>
  </div>
</div>