JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div id="1" class="smallDiv"><div class="info">This is some text</div></div>
<div id="2" class="smallDiv"></div>
<div id="3" class="smallDiv"></div>
<div id="4" class="smallDiv"></div>

CSS

.smallDiv{width:50px;height:50px;background-color:#CCC;border:1px solid #333;margin: 10px;cursor:pointer;}
.bigDiv{width:100px;height:100px;background-color:#CCC;border:1px solid #333;margin: 10px;cursor:pointer;}
.info{display:none;}

JavaScript

$('div').on("click", function(){
    if($(this).hasClass('smallDiv'))
    {
       $('div').not(this).fadeOut();
       $(this).addClass('bigDiv'); 
       $(this).removeClass('smallDiv'); 
        $('.info').fadeIn();
    } else {        
       $('div').not(this).fadeIn();
       $(this).addClass('smallDiv'); 
       $(this).removeClass('bigDiv');  
        $('.info').fadeOut();
    }
});