Toggle addclass with jquery parent selector

Question

I have some items products in a grid. I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.

This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).

 $('.items #show-actions').on('click', function(event) { event.preventDefault(); var $this = $(this).parent().parent('.items'); var $that = $(this).closest('.items'); $('.items').find('.actions').not($this).removeClass('active'); $that.find('.actions').toggleClass('active'); }); 

 <ul class="products-grid row"> <li class="items"> <a href="somelink" class="product-image"><img src="/images/myimage.png" "/></a> <div class="product-info"> <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> <li class="items"> <a href="somelink" class="product-image"><img src="/images/myimage.png" "/></a> <div class="product-info"> <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> </ul> 

Answer 1

You need to remove this row:

$('.items').find('.actions').not($this).removeClass('active');

Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):

 $('.items #show-actions').on('click', function(event) { event.preventDefault(); var $this = $(this).parent().parent('.items'); var $that = $(this).closest('.items'); $that.find('.actions').toggleClass('active'); }); 

 .items #show-actions { width: 100vw; background-color: royalblue; color: white; } .active { background-color: red; } img { width: 50px; height: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="products-grid row"> <li class="items"> <a href="somelink" class="product-image"><img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" /></a> <div class="product-info"> <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> <li class="items"> <a href="somelink" class="product-image"><img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" /></a> <div class="product-info"> <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> </ul> 

Answer 2

First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.

Second, you also have some extra quote marks in your img element.

Once you do that it's pretty simple.

 $('.show-actions').on('click', function() { var items = $('.items'); items.removeClass('active'); $(this).parent().parent('.items').addClass('active'); }); 

 .active { background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="products-grid row"> <li class="items"> <a class="product-image"><img src="/images/myimage.png"/></a> <div class="product-info"> <span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> <li class="items"> <a class="product-image"><img src="/images/myimage.png"/></a> <div class="product-info"> <span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span> <h2 class="product-brand">Test</h2> <div class="actions text-center hidden"> <button class="btn-block">Ok</button> </div> </div> </li> </ul>