jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<script src="bootstrap"></script>
<h4 class="title">FILTER:</h4>

    <div style="position: sticky;top: 0;z-index: 10000;background: #fff;color:blue;">
        <div class="row mx-0 inline_nav_wrapper header-shadow">
            <div class="col-12 px-0 inline_nav cata-sub-nav" id="filters" style="margin-top: 0.2rem;">         <span class="text-right works-filter flex-grow-1 w-sm-100 my-2 showAll filter-item" data-filter="all">ALL PRODUCTS</span>
                <span class="works-filter flex-grow-1 w-sm-100 my-2 filter-item nav-item-filter active-filter" data-filter="club-selection">THE CLUB SELECTION</span>
                <span class="works-filter flex-grow-1 w-sm-100 my-2 filter-item nav-item-filter active-filter" data-filter="chairs">CHAIRS</span>
                <span class="works-filter flex-grow-1 w-sm-100 my-2 filter-item nav-item-filter active-filter" data-filter="armchairs">ARMCHAIRS</span>
                <span class="works-filter flex-grow-1 w-sm-100 my-2 filter-item nav-item-filter active-filter" data-filter="sofas">SOFAS</span>
                <span class="works-filter flex-grow-1 w-sm-100 my-2 filter-item nav-item-filter active-filter" data-filter="benches">BENCHES & STOOLS</span>
                <span class="works-filter flex-grow-1 w-sm-100 my-2 filter-item nav-item-filter active-filter" data-filter="bar-chairs">BAR CHAIRS</span>
                <span class="works-filter flex-grow-1 w-sm-100 my-2 filter-item nav-item-filter active-filter" data-filter="center-tables">CENTER TABLES</span>                           
            </div>
        </div>
    </div>
    
 
<h4 class="title">ALL CATEGORIES:</h4>
 
  <div class="row mx-0">
      <div class="col-12">
          <div class="col-12">   
          
              <div class="col-sm-12 col-md-6 my-3 workItem show-workItem all">
                    <p>ALL PRODUCTS</p>
                    <img...

CSS

.works-filter {
        display: inline-block;
        text-decoration: none;
        transition: all .35s ease;
      }

      .works-filter:hover {
        cursor: pointer;
        /* text-decoration: underline; */
        transition: all .35s ease;
      }

      .works-filter-active {
        /* text-decoration: underline; */
        font-weight:600;
        text-decoration: underline;
        transition: all .35s ease;
      }

      .works-filter-active::before {
        font-weight:600;
        text-decoration: underline;
        text-transform: none;
        transition: all .35s ease;
      }

      .workItem {
        display: none;
      }

      .show-workItem {
        display: block;
        transition: all .35s ease;
      }

      .filter-item {
        padding-right: 2rem;
    }

    .filter-item:hover {
        font-weight: 600;
    }

    .inline_nav_wrapper {
        position: relative;
        height: 50px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .inline_nav	{
        margin-top: 25px;
        height: 80px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
  .title {
    color:grey;
    font-weight:bold;
  }

JavaScript

$(function(){

var filters = $('.works-filter'); // find the filters
var works = $('.workItem'); // find the portfolio items
var showAll = $('.showAll'); // identify the "show all" button

var cFilter, cFilterData; // declare a variable to store the filter and one for the data to filter by
var filtersActive = []; // an array to store the active filters

$(".works-filter").on("click", function () { // if filters are clicked
    cFilter = $(this);
    cFilterData = cFilter.attr('data-filter'); // read filter value

    highlightFilter();
    applyFilter();
});

function highlightFilter () {
    var filterClass = 'works-filter-active';
    if (cFilter.hasClass(filterClass)) {
        cFilter.removeClass(filterClass);
        removeActiveFilter(cFilterData);
    } else if (cFilter.hasClass('showAll')) {
        $('.works-filter').removeClass(filterClass);
        filtersActive = []; // clear the array
        cFilter.addClass(filterClass);
    } else {
        $('.showAll').removeClass(filterClass);
        cFilter.addClass(filterClass);
        filtersActive.push(cFilterData);
    }
}

function applyFilter() {
    // go through all portfolio items and hide/show as necessary
    $('.workItem').each(function(){
        var i;
        var classes = $(this).attr('class').split(' ');
        if (cFilter.hasClass('showAll') || filtersActive.length == 0) { // makes sure we catch the array when its empty and revert to the default of showing all items
            $('.workItem').addClass('show-workItem'); //show them all
        } else {
            $(this).removeClass('show-workItem');
            for (i = 0; i < classes.length; i++) {
                if (filtersActive.indexOf(classes[i]) > -1) {
                    $(this).addClass('show-workItem');
                }
            }
        }
    });
}

// remove deselected filters from the ActiveFilter array
function removeActiveFilter(item) {
    var index = filtersActive.indexOf(item);
    if (index > -1) {
       ...