JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outbox">
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum dolor sit amet</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum dolor sit amet</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>

CSS

.outbox
{
    margin: 0;
    padding: 0;
}

.heading
{
    background-color: #FF6666;
    border: 1px solid #FF5050;
    text-align: center;
    font-weight: bold;
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    /*float: right;*/
    width: 300px;
    height:25px; 
}



.content
{
  background-color: #FFCCCC;
}

JavaScript

$(document).ready(function() {
  $(".content").hide(); 
  $(".heading").click(function()
  {
    $(this).next(".content").slideToggle(500);
  });
});