JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<div class="btn" data-tgl="tgl1"></div>
обе кнопки работают
<div class="btn" data-tgl="tgl1"></div>
<div class="tgl" id="tgl1">asdkfj asldkfj alskdj flaskdjf laksdj flaksjd flaksdj flaksd jflaskd jflak sjdf</div>

<p>теперь 2 кнопки: одна сверку, другая снизу</p>
<div class="btn" data-tgl="tgl2"></div><br>
<div class="tgl" id="tgl2">ksdfj lskdj flaskjd flskjd fldkf jgldkf gdlkfg skjs dh sakdjf hskdj hfskjd hfskdjf</div>
<div class="btn" data-tgl="tgl2"></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 () {
    $('#' + $(this).data('tgl'))
        .slideToggle('slow', function () {
        $('[data-tgl="' + $(this).attr('id') + '"]')
            .toggleClass('pressed');
    });
});