Clever Geek Handbook

Switch CSS class using jQuery

I can't seem to get this to work. I want to make jQuery add / remove (or switch) a class that 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 connect event to

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

HTML -> add class .hideItem

to elementli 

<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 should it do:

enter image description here

+3


source to share


4 answers


The problem is you are targeting the class product-type

to your jQuery when you are actually using the class product-name

in your HTML.

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



//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>
Run codeHide result


Hope this helps! :)

+2


source


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

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

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


Hope it helps.

+1


source


Switch 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>
Run codeHide result


+1


source


you are using $("#products

... in jquery.i you cannot see the element with this id

in the html code.

Change the code as follows:

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

Note. I prefer to use event change

.

$(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>
Run codeHide result


+1


source






More articles:


All Articles