Toggle CSS class with jQuery

Question

I can't seem to get this to work. What I want to do is have jQuery add / remove (or toggle) a class which has display:none on it

jQuery

  <script type ="text/javascript">

    //Event Triggers
    $("#cbVitamins").click(function(evt){
      $("#products h2.product-type[data-type=vitamin]").parent().addClass("hideItem");
    });
  </script>

CSS

  <style>
    .hideItem {
      display:none;
    }
  </style>

HTML Button to hook event onto

      <div>
        <span>Show: </span>
        <input id="cbVitamins" type="checkbox" checked="checked"/>
        <label for="cbVitamins">Vitamins</label>
      </div>

HTML → add .hideItem class to the li element

<li class="product-item" data-prod_id="V-C6614">
    <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
    <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>

what its supposed to do:

Your `h2.product-type` selector doesn't match the class on the h2 element. It should be `h2.product-name`. — nnnnnn, Aug 09 '17 at 03:06

score 4 · Accepted Answer · answered Aug 09 '17 at 03:08

4

The problem is that you're targeting the class product-type with your jQuery, when you're actually using the class product-name in your HTML.

You can toggle visibility with the .toggle() method -- you don't need to create a separate class:

//Event Triggers
$("#cbVitamins").click(function(evt) {
  $("h2.product-name[data-type=vitamin]").parent().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <span>Show: </span>
  <input id="cbVitamins" type="checkbox" checked="checked" />
  <label for="cbVitamins">Vitamins</label>
</div>

<li class="product-item" data-prod_id="V-C6614">
  <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
  <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>

Hope this helps! :)

answered Aug 09 '17 at 03:08

Obsidian Age

41,205
10
48
71

thanks so much :) . Didn't realize I had typed in `type` instead of `name` that works as well. By the way, doesn't parents() target all parent classes up until `html` element? But in this instance, parents() is only target the next level up for me, which is what I want though. I thought only `parentsUntil()` does this? or am i thinking of `parent()` vs `parents()`? – Vincent Tang Aug 10 '17 at 01:48
Are you sure that `parents()` is **only** targeting the next level up for you? In both your example and my answer, we're using the singular `parent()`. I've just double-checked, and using `parents()` in my answer code does indeed toggle **all** visible elements. Don't forget that `parentsUntil()` is **exclusive**, and you can always **chain** `parent()` if need be; `element.parent().parent()` is perfectly valid. – Obsidian Age Aug 10 '17 at 02:20
never thought of parent().parent(). There's lots of other parent classes enclosing the data I had (but omitted), but I read the jQuery documentation so now I understand the distinction between `parent()` and `parents()`. thanks for info – Vincent Tang Aug 10 '17 at 13:41

Ehsan · Answer 2 · 2017-08-09T04:11:44.403

you use of $("#products... in jquery.i can't see element with this id in html code.

Change code like this:

$('#cbVitamins').click(function(){
    $('.product-item').toggleClass('hideItem');
})

Note:I prefer use of change event.

$(document).ready(function(){
  $('#cbVitamins').click(function(){
    $('.product-item').toggleClass('hideItem');
  })
})

.hideItem {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div>
  <span>Show: </span>
  <input id="cbVitamins" type="checkbox" checked="checked"/>
  <label for="cbVitamins">Vitamins</label>
</div>
<li class="product-item" data-prod_id="V-C6614">
  <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
  <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>

thanks this was helpful :) – Vincent Tang Aug 10 '17 at 01:49 — Vincent Tang, Aug 10 '17 at 01:49

score 1 · Answer 3 · answered Aug 09 '17 at 03:09

1

You can use jquery hide() and show() methods.

$('.clickButton').click(function() {
    $('.element').hide();
});

$('.clickButton').click(function() {
    $('.element').show();
});

Hope thats help.

answered Aug 09 '17 at 03:09

You *can*, but why would that work if `.addClass("hideItem")` didn't work? – nnnnnn Aug 09 '17 at 03:34
Does `toggle()` without any parameter inside of that essentially do both `hide()` and `show()` or is different? – Vincent Tang Aug 10 '17 at 01:49
Yes it does indeed. – Aug 10 '17 at 07:24

score 1 · Answer 4 · answered Aug 09 '17 at 03:41

Toggle class using jquery

$("#cbVitamins").on('change', function() {
  $(".product-name").toggleClass("hide");
});

.hide {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
  <span>Show: </span>
  <input id="cbVitamins" type="checkbox" checked="checked" />
  <label for="cbVitamins">Vitamins</label>
</div>

<li class="product-item" data-prod_id="V-C6614">
  <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
  <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>

does `change` event just encompass more things than just `click` when describing event handler? — Vincent Tang, Aug 10 '17 at 01:50

Toggle CSS class with jQuery

4 Answers4