JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div class="container">
     <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg" height="100%">
         <span>TEXT HERE TEXT HERE TEXT HERE </span>
</div>

CSS

.container {
    display: block;
    width: 900px;
    height: 116px;
    background-color: red;
}
span {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    max-height: 100%;
}
img {
    float: left;
    height:100%;
    max-width: 400px;
    min-width: 200px;
}

JavaScript

$(document).ready(function() {
    //ON CLICK
    $("img").toggle(function () { //fired the first time
        $(this).parent().animate({
            //FIRSTCLICK COMMAND
            height: "232px"
        }, function(){
            $(this).children().css("background-color","yellow");
        });
      
    }, function () { // fired the second time 
        $(this).parent().animate({
            //SECONDCLICK COMMAND
            height: "116px"
        },function(){
            $(this).children().css("background-color","white");
        });
        
    });
    
});