JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<div class="first-section">
  <div class="intro">
    <p>This is the intro section</p>
  </div>
  <div class="first-sub section-one">
    <p>This is section one</p>
  </div>
  <div class="first-sub section-two">
    <p>This is section two</p>
  </div>
  <div class="first-sub section-three">
    <p>This is section three</p>
  </div>
</div>

<div class="second-section">
  <div class="second-sub">
    <a href="#" id="section-one">Show Section One</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section one</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section one</a>
  </div>
</div>

JavaScript

$(document).ready(function() { 
  $('.first-sub').hide();
  $('.second-sub a').click(function() {
    var id = $(this).attr('id');
      var element=".first-section .first-sub."+id+"";       
       $('.first-sub').hide();
      $(element).fadeIn("slow");
  });
    
});