JSFiddle - React, Tailwind, and code Playground

by Bharat Soni

HTML

<div class= "main-wraper">
    <div class= "wraper">
        <div class="heading">Heading</div>
        <div class="text">Body of P</div>
    </div>
    <div class= "wraper">
        <div class="heading"></div>
        <div class="text"></div>
    </div>
    <div class= "wraper">
        <div class="heading"></div>
        <div class="text"></div>
    </div>
    <div class= "wraper">
        <div class="heading"></div>
        <div class="text"></div>
    </div>
    <div class= "wraper">
        <div class="heading"></div>
        <div class="text"></div>
    </div>
</div>

CSS

.main-wraper{width:400px;border:1px solid red;float:left;padding:5px;}
.text{width:100%;height:100px;background-color:green;margin:10px 0px;float:left;}
.heading{width:100%;float:left;background-color:yellow;margin:15px 0px -5px;height:50px;}
.wraper{background-color:#cdcdcd;float:left;width:100%;margin:5px 0px;padding:5px 0px;}
*{text-align:center;font-family:verdana;}

JavaScript

$('.heading').on('click',function(){
    $(this).siblings('.text').slideToggle();
});