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!

toggleClass() api.jquery.com/toggleclass

fedesc
– fedesc

2019-04-22 12:05:10 +00:00
Commented Apr 22, 2019 at 12:05 — fedesc
– fedesc, Commented Apr 22, 2019 at 12:05
.toggle()

Yevhen Horbunkov
– Yevhen Horbunkov

2019-04-22 12:05:57 +00:00
Commented Apr 22, 2019 at 12:05 — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Apr 22, 2019 at 12:05

Thanveer Shah · Accepted Answer · 2019-04-22 12:08:09Z

2

You need to use .toggle()

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

answered Apr 22, 2019 at 12:08

Thanveer Shah

3,3442 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syed mohamed aladeen · Accepted Answer · 2019-04-22 12:22:37Z

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>

answered Apr 22, 2019 at 12:22

Syed mohamed aladeen

6,8134 gold badges37 silver badges60 bronze badges

Comments

BJohn · Accepted Answer · 2019-04-22 12:25:31Z

0

Alternatively you can also use below approach:

CSS

.hidden {
 display:none;
}

JQuery

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

answered Apr 22, 2019 at 12:25

BJohn

956 bronze badges

Comments

Saba Shavidze · Accepted Answer · 2019-04-22 12:25:58Z

0

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

answered Apr 22, 2019 at 12:25

Saba Shavidze

6445 silver badges15 bronze badges

1 Comment

Saba Shavidze Over a year ago

if you does not set time it works like without time.

Syed mohamed aladeen · Accepted Answer · 2019-04-22 12:31:18Z

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>

Collectives™ on Stack Overflow

Show hide element on same button click

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related