Toggle CSS class with jQuery [duplicate]

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
– nnnnnn, Commented Aug 9, 2017 at 3:06

Obsidian Age · Accepted Answer · 2017-08-09 03:08:54Z

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 9, 2017 at 3:08

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

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

3 Comments

Vincent Tang Over a year ago

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()?

Obsidian Age Over a year ago

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.

Vincent Tang Over a year ago

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

Ehsan · Accepted Answer · 2017-08-09 04:11:44Z

2

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>

edited Aug 9, 2017 at 4:11

answered Aug 9, 2017 at 3:58

Ehsan

13k3 gold badges27 silver badges46 bronze badges

1 Comment

Vincent Tang Over a year ago

thanks this was helpful :)

user2182102 · Accepted Answer · 2017-08-09 03:09:50Z

1

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

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

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

Hope thats help.

answered Aug 9, 2017 at 3:09

user2182102

3 Comments

nnnnnn Over a year ago

You can, but why would that work if .addClass("hideItem") didn't work?

Vincent Tang Over a year ago

Does toggle() without any parameter inside of that essentially do both hide() and show() or is different?

user2182102 Over a year ago

Yes it does indeed.

kdgilang · Accepted Answer · 2017-08-09 03:41:09Z

1

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>

answered Aug 9, 2017 at 3:41

kdgilang

5816 silver badges8 bronze badges

1 Comment

Vincent Tang Over a year ago

does change event just encompass more things than just click when describing event handler?

Collectives™ on Stack Overflow

Toggle CSS class with jQuery [duplicate]

4 Answers 4

3 Comments

1 Comment

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

3 Comments

1 Comment

Linked

Related