Show hide element on same button click

Question

I have the following sample code :

CODE HTML:

<ul>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item hidden"> item 1 </li>
  <li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>

CODE CSS:

.hidden {
  display: none;
}
.visible {
  display: block;
}

CODE JS:

$('.button').on('click', function (e) {
  var item = $('.item');
  item.removeClass('hidden'); 
});

I want to add class .visible to the elements that previously had the .hidden class. Basically I want to hide the items again at the next click and be a toggle of classes.

How can I hide the last two items?

Thanks in advance!

Answer 1

You need to use .toggle()

 $('.button').on('click', function (e) {
      $('.hidden').toggle('visible'); 
});

Answer 2

Try this, no need of css, just .toggle() will do it.

 $('.button').on('click', function (e) { $('.hidden').toggle(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item hidden"> item 1 </li> <li class="item hidden"> item 1 </li> </ul> <button class="button">Show/Hide element</button> 

Answer 3

Alternatively you can also use below approach:

CSS

.hidden {
 display:none;
}

JQuery

$('.button').on('click', function (e) {
      $('#anyElement').toggleClass('hidden');
});

Answer 4

You need to use switchClass to remove existing one and add second.

Answer 5

Alternatively, You can loop through each element on button click and remove/add the relevant classes.

 $("button").click(function(){ $("li").each(function(){ let $this = $(this); if($this.hasClass('hidden')){ $this.removeClass("hidden").addClass("visible"); } else if($this.hasClass('visible')){ $this.removeClass("visible").addClass("hidden"); } }) }) 

 .hidden { display: none; } .visible { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item hidden"> item 1 </li> <li class="item hidden"> item 1 </li> </ul> <button class="button">Show/Hide element</button>