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);
});
});