JSFiddle - React, Tailwind, and code Playground

by sesubash

HTML

<div id="containingThumbs">
<div><img src="http://modernizr.com/i/img/logo-x12.png"></div>
<div><img src="http://modernizr.com/i/img/logo-x12.png"></div>
</div>

<div id="content">
<div><img src="http://modernizr.com/i/img/logo-x12.png"></div>
<div><img src="http://modernizr.com/i/img/logo-x12.png"></div>
</div>

JavaScript

function expandDiv(){
    //first hide all content that is currently displayed, if any
    $(this).css("display","none");
    //then display only the right content div
    //$("#content div:nth-child("+j+")").css("display","inherit"); 
}

function makeInteractive(){
    for (var i = 0;i<$("#containingThumbs").children().length;i++){
        $("#containingThumbs").on("click","div",expandDiv);
    }
}
makeInteractive();