JSFiddle - React, Tailwind, and code Playground

by shaashwato1308

HTML

<input id="button" type="button" value="expand" />
<br />
<div style="width: 300px; height: 30px; border: 1px solid #000;">
    <div id="slider" style="width: 20%; height: 100%; border: 1px solid #FF0000; background-color: #FF0000"></div>
</div>

JavaScript

coun = 0;
$(document).ready(function() {

    $("#slider").click(function() {
    if(coun%2 === 0){
    $("#slider").animate({
            width: '+=300px',
            height: '+=400px'
        }, 1000);
    }else{
    $("#slider").animate({
            width: '-=300px',
            height: '-=400px'
        }, 1000);
    }
        coun++;
    });
                           
});