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-of-song">
  <span class="active" data-type="chorus">Chorus</span>
  <span data-type="verse">Verse</span>
</div>

<div>
  <h5>Song 1</h5>
  <p>Verse</p>
</div>

<div>
  <h5>Song 2</h5>
  <p>Chorus</p>
</div>

CSS

body {text-align: center;}
.part-of-song span {color: blue; text-decoration: underline;}
.part-of-song span.active{color: red;}
.part-of-song span:hover {cursor: pointer;}

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

JavaScript

$(".part-of-song span").click(
  function () {
    $("span").removeClass("active");
    $(this).addClass("active");
  } function () {
    var dataType = $(this).attr('data-type');
    
    $("body").find("p:contains"("' + $dataType + '")').addClass("hidden")
  }
});