CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Cristi
Cristi

Reputation: 531

Show hide element on same button click

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!

Upvotes: 0

Views: 3209

Answers (5)

Zainul Abideen
Zainul Abideen

Reputation: 1900

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>

Upvotes: 0

Saba Shavidze
Saba Shavidze

Reputation: 634

You need to use switchClass to remove existing one and add second. enter image description here

Upvotes: 0

BJohn
BJohn

Reputation: 95

Alternatively you can also use below approach:

CSS

.hidden {
 display:none;
}

JQuery

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

Upvotes: 0

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

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>

Upvotes: 2

Thanveer Shah
Thanveer Shah

Reputation: 3323

You need to use .toggle()

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

Upvotes: 2

Related Questions