JSFiddle - React, Tailwind, and code Playground

by edddotcom

HTML

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

CSS

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

JavaScript

$(document).ready(function () {
    //Initial Conditions
    $(".container > img").width("200px");
    $(".container > img").height("116px");
    $(".container > p").hide();

    //ON CLICK
    $(".container > img").toggle(function () { //fired the first time
        $(this).animate({
            width: "400px",
            height: "232px"
        });
        $(this).siblings(".textab").show(); //This is where i need to show the text
    }, function () { // fired the second time 
        $(this).animate({
            width: "200px",
            height: "116px"
        });
        $(this).siblings(".textab").hide(); //This is where i need to hide the text again
    });

});