JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<div class="btn11" data-tgl="tgl1"></div>
<div class="btn12" data-tgl="tgl1" ></div>
<br>
<div class="tgl linkedid-btn1" id="tgl1">asdkfj asldkfj alskdj flaskdjf laksdj flaksjd flaksdj flaksd jflaskd jflak sjdf</div>
<div class="btn"></div>
    <p>qweqweqweqw</p>
<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 {
    display:inline-block;
    width:30px;
    height:30px;
    background-color:blue;
}
.btn.pressed {
    background-color:red;
}

JavaScript

$('.btn').click(function(){
    var btnid = $(this).attr('id');
    $('.linked-' + btnid).slideToggle('slow',function(){
        
        $(this).prev().toggleClass('pressed');
    });
});