JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<script src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<button class="collapse-classes">
    <span class="button-text">Show</span>
</button>

<div id="back"></div>

CSS

#back {
   height:50px;
    width:100px;
    border:solid thin black;
     
}

JavaScript

$('.collapse-classes').click(function() {
    
    var $this = $(this);
    var divs = $('#back'); 

 var ori = {'background' : 'red',
                'height' : '20px',
                'color' : 'red'}
    

  var chang = {'background' : 'red',
                'height' : '50px',
                'color' : 'red'}

 $this.toggleClass('show');

    if ($this.hasClass('show')) {
        divs.animate({
            backgroundColor: "red",
            height:"20px"}, 500 );
        
    } else {
        divs.animate({
            height: "50px",
            backgroundColor:"blue"}, 500 );
    }
});