JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div>
  <a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
  <h1 class="infoText" style="display:none">text 1</h1>
</div>
<div>
  <a class="info" href="javascript:void(0);">header 2</a>
  <h1 class="infoText" style="display:none">text 2</h1>
</div>
<div>
  <a class="info" href="javascript:void(0);">header 3</a>
  <h1 class="infoText" style="display:none">text 3</h1>
</div>

CSS

.info
{
    text-decoration:none;
    background:red;
    color:white;
    
 }
.infoText
{
    background:gray;
    color:white;
    padding:5px;
}

JavaScript

$(document).ready(function() {
  $('.info').click(function() {
    $(this).next().fadeToggle("slow");
  });
});