JSFiddle - React, Tailwind, and code Playground

by edddotcom

HTML

<img id="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">
<p id="textab">Paragraph Text</p>

CSS

#imgtab {
    position:relative;
}
#textab {
    position:relative;
    left:410px;
    top:-250px;
    width:300px;
    height:300px;
}

JavaScript

$(document).ready(function () {
    //Initial Conditions
    $("#imgtab").width("200px");
    $("#imgtab").height("116px");
    $("textab").hide();
    
    //ON CLICK
    $("#imgtab").toggle(function () { //fired the first time
        $("#imgtab").animate({
            width: "400px",
            height: "232px"
        });
        $("#textab").show()
    }, function () { // fired the second time 
        $("#imgtab").animate({
            width: "200px",
            height: "116px"
        });
        $("textab").hide();
    });
    
});