jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div class="filter-wrapper">
        <h3>Filter Items</h3>
        <button class="reset-filter">
          reset
        </button>
          <ul class="filter-options">
             
            <li class="filter-list"><div><input type="checkbox" value="tag1" data-filter_id="tag1"> Our Solutions</div></li>
            
            <li class="filter-list"><div><input type="checkbox" value="tag2" data-filter_id="tag2"> Service categories</div></li>
            
          </ul>

        <div>
          Country / Region
        </div>

        <form class="filter-dropdown">
          <select class="event-type-select">
            
            <option value="all">All</option>
            
            <option value="belgium">Belgium</option>
            
            <option value="france">France</option>
            
          </select>
         </form>
      </div>

<div class="card-wrapper">
        <div class="card-col">
        

        <div class="card-col-item item-border 
                     tag1
                " data-eventtype="belgium">
          <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card%20Images/pexels-photo-209251.jpeg');">
            
          </div>
          <div class="card-inner-col ">
            <div class="card-tags">
                
              
                     our solutions
                
            </div>
            <div class="card-item-title">
              <h4 class="PrimaryDarkBlue">
                Lorem Ipsum Dolor
              </h4>
              
            </div>
          </div>
        </div>
        
 <div class="card-col-item item-border 
                     tag2
                " data-eventtype="belgium">
          <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card%20Images/pexels-photo-209251.jpeg');">
            
          </div>
          <div class="card-inner-col ">
           ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}


button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.card-col-item{
  background:white;
  width:33%;
}

JavaScript

$(".filter-options :checkbox").click(function() 
    {
        $(".card-col .card-col-item").hide();
        $(".filter-options :checkbox:checked").each(function() 
        {
           $("." + $(this).val()).fadeIn();
        });
       
        if($('.filter-options :checkbox').filter(':checked').length < 1) 
        {
             $(".card-col .card-col-item").fadeIn();
        }
});


$( ".event-type-select" ).change(function() {
  var selectedEventType = this.options[this.selectedIndex].value;
  if (selectedEventType == "all") {
    $(".card-col .card-col-item").show(function(){$(this).removeClass( "country" );});
      } else {
        $(".filter-options :checkbox").removeAttr("checked");
        $(".card-col .card-col-item").hide(function(){$(this).removeClass( "country" );});
        $('.card-col .card-col-item[data-eventtype="' + selectedEventType + '"]').show(function(){$(this).addClass( "country" );});
  }
});
     

$(".reset-filter").click(function() 
    {
    $(".filter-options :checkbox").removeAttr("checked");
            $(".card-col .card-col-item").show(function(){$(this).removeClass( "country" );});
    });