Filter

Demo

Category 1
Category 2
Category 3

Code

<div class="c-filter" data-filter="test-filter">
	<button class="active" data-id="all">Show all</button>
	<button data-id="1">Category 1</button>
	<button data-id="2">Category 2</button>
	<button data-id="3">Category 3</button>
</div>
<div class="c-filter-items" data-filter-items="test-filter">
	<!-- Separate multiple categories with spaces -->
	<div data-filter-item="1 2">Category 1</div>
	<div data-filter-item="2">Category 2</div>
	<div data-filter-item="3">Category 3</div>
</div>
// Initialize for all elements in the DOM
Filter.setup();

// Initialize for elements in a NodeList or Array
Filter.setup(document.querySelectorAll(".elements"));

// Initialize for one element
new Filter(document.querySelector("#element"));