JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="part">
  <a data-type="test">Test</a>
  <a data-type="new">New</a>
</div>

<div>
  <h5>Example 1</h5>
  <p>Test</p>
</div>

<div>
  <h5>Example 2</h5>
  <p>New</p>
</div>

<div>
  <h5>Example 3</h5>
  <p>Test</p>
</div>

CSS

body {text-align: center;}
.part a {color: blue; text-decoration: underline;}
.part a:hover {cursor: pointer;}

div:not(.part){
  background-color: white;
  display: inline-block;
  margin: 1%;
  width: 40%;
}
.hidden{display: none}

JavaScript

$(".part a").click(
  function () {
    var dataType = $(this).attr('data-type');
    $("body").find('p[text*="' + dataType + '"]'):not(:contain("dataType")).addClass("hidden")
  }
);