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) {
		var $items = $('.filter__item');
		if (filterName !== 'all') {
			$items = $items.filter('.' + filterName);

		}
		$('.filter__item').hide();
		$items.show();
	}
	$('.filter__button').click(function (e) {
		var $el = $(e.target);
		var filterName = $el.data('filter');
		if (filterName) { filter(filterName) }
		$('.filter__button').removeClass('active');
		$(this).addClass('active');
	});