JSFiddle - React, Tailwind, and code Playground

by AKTILOR

HTML

<div>
  <button id="all">Tout voir</button>
  <button id="sport">Sport</button>
  <button id="electric">Électrique</button>
  <button id="luxe">Luxe</button>
  <button id="cher">Cher</button>
</div>

<ul>
  <li class="all electric luxe">Tesla Model S</li>
  <li class="all electric sport cher">BMW i8</li>
  <li class="all luxe">Aston Martin DB9</li>
  <li class="all luxe sport cher">Mercedes classe G</li>
  <li class="all sport">Toyota Supra</li>
  <li class="all electric">Renault Zoe</li>
  <li class="all sport luxe cher">Bentley Continental GT</li>
  <li class="all sport cher">Ferrari F12</li>
  <li class="all sport luxe">Audi RS6</li>
  <li class="all cher sport">Bugatti Veyron</li>
</ul>

CSS

.hidden {
  display: none;
}

div {
  display: flex;
  justify-content: space-around;
}

button {
  width: calc(100% / 5);
  text-decoration: none;
  border: 1px solid #f19066;
  border-radius: 5px;
  padding: 10px;
  color: #f3a683;
  font-size: 1em;
}

button:first-child {
  background-color: #e15f41;
  color: white;
}

JavaScript

var allElements = document.getElementsByClassName('all');
var sportElements = document.getElementsByClassName('sport');
var electricElements = document.getElementsByClassName('electric');
var luxeElements = document.getElementsByClassName('luxe');
var cherElements = document.getElementsByClassName('cher');

document.getElementById('sport').onclick = function() {
for(var i = 0; i < allElements.length; i++) {
	allElements[i].classList.add('hidden');
}
	for(i = 0; i < sportElements.length; i++) {
  sportElements[i].classList.remove('hidden');
 }
}

document.getElementById('electric').onclick = function() {
for(var i = 0; i < allElements.length; i++) {
	allElements[i].classList.add('hidden');
}
	for(i = 0; i < electricElements.length; i++) {
  electricElements[i].classList.remove('hidden');
 }
}

document.getElementById('luxe').onclick = function() {
for(var i = 0; i < allElements.length; i++) {
	allElements[i].classList.add('hidden');
}
	for(i = 0; i < luxeElements.length; i++) {
  luxeElements[i].classList.remove('hidden');
 }
}

document.getElementById('cher').onclick = function() {
for(var i = 0; i < allElements.length; i++) {
	allElements[i].classList.add('hidden');
}
	for(i = 0; i < cherElements.length; i++) {
  cherElements[i].classList.remove('hidden');
 }
}

document.getElementById('all').onclick = function() {
	for(i = 0; i < allElements.length; i++) {
  allElements[i].classList.remove('hidden');
 }
}