JSFiddle - React, Tailwind, and code Playground

by edddotcom

HTML

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

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

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

        </div>
    </div>
</div>

CSS

.page {
    width:850px;
	margin-left: auto;
	margin-right: auto;
	background-color:yellow;
    text-align:center;
}
.row {
    max-width: 840px;
    background-color: blue;
    display: inline-block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	
}
.container {
    display: block;
	float: left;
    width: 200px;
    height: 116px;
    background-color: red;
    margin: 5px;
    overflow: hidden;
}
span {
    margin-top: 10px;
    margin-left: 10px;
    max-height: 100%;
    text-align: justify;
}
img {
    width:100%;
    max-width: 400px;
    min-width: 200px;
}

JavaScript

$(document).ready(function () {
    //ON CLICK
    $("span").hide();
    $("img").toggle(function () { //fired the first time
        $(".container").css({
            "height": "116px",
                "width": "200px"
        });
        $("span").hide();
        $(this).parent().animate({
            //FIRSTCLICK COMMAND
            height: "400px",
            width: "400px"

        }, function () {
            $(this).children("span").show();
        });
        //Enlarges container then shows text

    }, function () { // fired the second time 
        $(this).siblings("span").hide(0, '', function () {
            $(this).parent(".container").animate({
                //SECONDCLICK COMMAND
                height: "116px",
                width: "200px"
            });
        });

    }); //Hides text then contracts container

});