how to toggle display between two different classnames with javascript-CodePudding

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 >
   <label>Year</label>
   <select  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 >
   <label>From:</label>
   <input  type="date" name="" id="" style="font-size: 14px;">
</div>
</div>
<div >
   <div >
      <label>Month</label>
      <select  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 >
      <label>To:</label>
      <input  type="date" name="" id="" style="font-size: 14px;">
   </div>
</div>
<div >
   <div ><button >Filter</button></div>
</div>

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

CodePudding user response：

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 >
  <label>Year</label>
  <select  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 >
  <label>From:</label>
  <input  type="date" name="" id="" style="font-size: 14px;">
</div>

<div >
  <div >
    <label>Month</label>
    <select  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 >
    <label>To:</label>
    <input  type="date" name="" id="" style="font-size: 14px;">
  </div>

  <div >
    <div ><button >Filter</button></div>
  </div>
</div>

CodePudding user response：

let fb = document.querySelector('.filterbtn');
let s1 = document.querySelectorAll('.switch1');
let s2 = document.querySelectorAll('.switch2');

fb.addEventListener('click',function(){
    s1.forEach(el => {
        el.classList.toggle('switch');
    });
    s2.forEach(el => {
        el.classList.toggle('switch');
    });
});

.switch{
            display: none;
        }

<div >
   <label>Year</label>
   <select  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 >
   <label>From:</label>
   <input  type="date" name="" id="" style="font-size: 14px;">
</div>
</div>
<div >
   <div >
      <label>Month</label>
      <select  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 >
      <label>To:</label>
      <input  type="date" name="" id="" style="font-size: 14px;">
   </div>
</div>
<div >
   <div ><button >Filter</button></div>
</div>