JSFiddle - React, Tailwind, and code Playground

by Pavle Lucic

HTML

<button id="button">Button</button>
<div class="one"></div>

CSS

.one {
    background: coral;
    width: 500px;
    height: 200px;
    position: relative;
    top: 20px;
    left: 500px;
    border-radius: 5px;
}
button {
    position: relative;
    left: 500px;
    width: 500px;
    height: 50px;
    background-color: darkslateblue;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    font-family:"Roboto";
    border: none;
    letter-spacing: 1px;
}
button:hover {
    background-color: tomato;
    color: #000;
}
button:active {
    background-color: green;
}

JavaScript

$(document).ready(function (){
    $("#button").on("click", function (){
    	if ($(".one").height() == 200) {
           $(".one").animate(
               {height: "300px"});
           }
        else if ($(".one").height() == 300) {
           $(".one").animate({height: "200px"});
           }
        });
    });