JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="one-click">one</a>
<br>
<a href="#" class="two-click">two</a>
<br>
<a href="#" class="three-click">three</a>
<br>
<a href="#" class="all-click">all</a>
<ul>
  <li class="one two">1 one</li>
  <li class="two">2 two</li>
  <li class="one">3 one</li>
  <li class="two">4 two</li>
  <li class="two">5 two</li>
  <li class="three">6 three</li>
</ul>

CSS

body {
  font: 62.5%/1.6 Verdana, Tahoma, sans-serif;
  color: #333;
}

h1,
h2 {
  color: #ff6600;
}

header,
main,
footer {
  margin: 30px auto;
  width: 600px;
}

#content {
  padding: 8px;
}

.box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 2px #ccc;
}

JavaScript

(function($, undefined) {
  $(function() {
    function showSpisok() {
      $(".one, .two, .three, .one.two").show();
    };
    $(".one-click").click(function() {
      showSpisok()
      $(".two, .three").hide();
      $(".one.two").show();
      return false;
    });
    $(".two-click").click(function() {
      showSpisok()
      $(".one, .three").hide();
      $(".one.two").show();
      return false;
    });
    $(".three-click").click(function() {
      showSpisok()
      $(".one, .two").hide();
      return false;
    });
    $(".all-click").click(function() {
      showSpisok()
      return false;
    });
  });
})(jQuery);