JSFiddle - React, Tailwind, and code Playground
HTML
<div class="btn"></div>
<div class="tgl">asdkfj asldkfj alskdj flaskdjf laksdj flaksjd flaksdj flaksd jflaskd jflak sjdf</div>
<div class="btn"></div>
<div class="tgl">ksdfj lskdj flaskjd flskjd fldkf jgldkf gdlkfg skjs dh sakdjf hskdj hfskjd hfskdjf</div>
<div class="btn"></div>
<div class="tgl">dkf jglkfj gdlk jgdlk fjglkj slkdfj sldkfj sldkfj slkdfj slkd jflskd jfsldkfj</div>
CSS
.tgl {
width:100px;
padding:4px; padding-top:10;
border:1px solid red;
position:relative;
}
.btn {
width:30px;
height:30px;
background-color:blue;
}
.btn.pressed {
background-color:red;
}
JavaScript
$('.btn').click(function(){
$(this).next().slideToggle('slow',function(){
$(this).prev().toggleClass('pressed');
});
});