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 (section, filterName) {
		var items = section.children('.filter__item');
		if (filterName !== 'all') {
      items.hide();
			items = items.filter('.' + filterName);
		}
		items.show();
	}
	$('.filter__button').click(function () {
		var filterName = $(this).data('filter');
		if (filterName) { 
    	filter($(this).parent('.filter__section'), filterName);
    }
		$('.filter__button').removeClass('active');
		$(this).addClass('active');
	});