JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<!-- The Teams -->
<a href="#" class="btn-player" data-team="chelsea">Chelsea</a>
<a href="#" class="btn-player" data-team="psg">Paris St-Germain</a>
<a href="#" class="btn-player" data-team="real-madrid">Real Madrid</a>
<a href="#" class="btn-player" data-team="barcelona">Barcelona</a>
<a href="#" id="btn-show-all">SHOW ALL PLAYERS</a>

<!-- The Players -->
<div class="player" data-players-team="chelsea">Cesc Fabregas</div>
<div class="player" data-players-team="psg">Zlatan Ibrahimovic</div>
<div class="player" data-players-team="real-madrid">Cristiano Ronaldo</div>
<div class="player" data-players-team="chelsea">Didier Drogba</div>
<div class="player" data-players-team="chelsea">John Terry</div>
<div class="player" data-players-team="barcelona">Lionel Messi</div>
<div class="player" data-players-team="real-madrid">Sergio Ramos</div>
<div class="player" data-players-team="chelsea">Thibault Courtois</div>
<div class="player" data-players-team="psg">Thiago Motta</div>

CSS

a {
  margin:0 5px;
}

a:link {
  color: red
}

a:visited {
  color: red
}

a:hover {
  color: black;
  text-decoration: none;
}

JavaScript

$( ".btn-player" ).click(function(){

  var getLinkType, getElType, getElNotType;

  // Feature-detect for dataset support
  if( !this.dataset ) { // If IE 10 or lower
    getLinkType = this.getAttribute( "data-team" );
   } else { // For other browsers
     getLinkType = this.dataset.team;
   }

  getElType = $( "div[data-players-team~="+getLinkType+"]" );

  getElNotType = $( "div[data-players-team!="+getLinkType+"]" );

   $( ".player" ).filter( getElNotType ).css( "display", "none" );
   $( ".player" ).filter( getElType ).css( "display", "block" );

});

$( "#btn-show-all" ).click(function() {
  $( ".player" ).css( "display", "block" );
});