JSFiddle - React, Tailwind, and code Playground

by Hamed Momeni

HTML

<div class="cont">
<div class="accord"></div>
<div class="accord"></div>
<div class="accord"></div>
<div class="accord"></div>
</div>

CSS

.accord{
    width:24px;
    height:180px;
    float:left;
}
.accord:nth-child(1){
    background:#ccc;
}
.accord:nth-child(2){
    background:#ffee44;
}
.accord:nth-child(3){
    background:#123456;
}
.accord:nth-child(4){
    background:#654321;
}

JavaScript

$(function(){
    $('.accord').delay(500).hover(function(){
        $(this).animate({width: 120});
    },function(){
        $(this).animate({width: 24});
    });
});