JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>
<div class="block"><div class="js-btnwrap"><div class="btn"></div></div></div>

CSS

.block {
    height: 20px;
    margin-bottom: 10px;
    padding: 20px;
    border: 1px solid #000;
    background: white;
    overflow: hidden;
}

.js-btnwrap {
    width: 50px;
    height: 20px;
    float: right;
    background: grey;
    cursor: pointer;
}

.btn {
    width: 50px;
    height: 20px;
    background: yellow;
    -webkit-transform: scale(0);
    -webkit-transition: all .5s linear;
}

.arrow {
    width: 10px;
    height: 10px;
    background: red;
}

.js-btnwrap.active .btn {
    -webkit-transform: scale(1);
}

JavaScript

$(function(){
    var $btn = $('.js-btnwrap').on('click', function(){
        $(this).toggleClass('active');
    });
});