jQuery addClass example

Change class name on click in jQuery

HTML

<div class="filter__section">
  <button class="filter__button" data-filter="foo">foo</button>
  <button class="filter__button" data-filter="bar">bar</button>
  <button class="filter__button" data-filter="boo">boo</button>
  <button class="filter__button" data-filter="all">all</button>

  <div class="filter__item foo">foo</div>
  <div class="filter__item bar">bar</div>
  <div class="filter__item boo">boo</div>
</div>

<div class="filter__section">
  <button class="filter__button" data-filter="foo">foo</button>
  <button class="filter__button" data-filter="bar">bar</button>
  <button class="filter__button" data-filter="boo">boo</button>
  <button class="filter__button" data-filter="all">all</button>

  <div class="filter__item foo">foo</div>
  <div class="filter__item bar">bar</div>
  <div class="filter__item boo">boo</div>
</div>

CSS

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

.filter__item {
  background: lightgray;
  border: 1px solid black;
  margin: 5px auto;
  padding: 5px;
}

JavaScript

function filter(filterName, $section) {
  var $items = $('.filter__item', $section);
  if (filterName !== 'all') {
    $items = $items.filter('.' + filterName);

  }
  if ($items.filter(':visible').length) {
    $items.hide();
  } else {
    $items.show();
  }
}
$('.filter__button').click(function(e) {
  var $el = $(e.target);
  var filterName = $el.data('filter');
  var $section = $el.closest('.filter__section');
  if (filterName) {
    filter(filterName, $section)
  }
  $('.filter__button').removeClass('active');
  $(this).addClass('active');
});