JSFiddle - React, Tailwind, and code Playground

by kirrrusha

HTML

<div class="wrapper">
  <div class="tabs">
    <ul>
      <li data-filter="*">All</li>
      <li data-filter="graphics">graphics</li>
      <li data-filter="love">Filter2</li>
      <li data-filter="coffee">Filter3</li>
    </ul>
  </div>
  <div class="entities">
    <ul>
      <li class="love">Love1</li>
      <li class="graphics">Graphics1</li>
      <li class="coffee">Coffee1</li>
      <li class="love">Love2</li>
      <li class="graphics">Graphics1</li>
      <li class="coffee">Coffee2</li>
    </ul>
  </div>
</div>

CSS

.hidden {
  display: none;
}

JavaScript

var filters = document.querySelectorAll('.wrapper .tabs li');
var entities = document.querySelectorAll('.wrapper .entities ul li');

filters.forEach(filterForEach);

function filterForEach(item) {
  item.addEventListener('click', eventListener);
}

function eventListener(event) {
  var filterName = event.target.getAttribute("data-filter");

  entities.forEach(function(entity) {
    if (filterName == '*' || entity.classList.contains(filterName)) {
      entity.classList.remove('hidden');
    } else {
      entity.classList.add('hidden');
    }
  })
}