JSFiddle - React, Tailwind, and code Playground

by Sankar Narayanan

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="boxes">
<div class="arrow">
<span class="prev">&lt;</span>
<span class="nxt">&gt;</span>
</div>
<div class="close">X</div>
<div class="box">
<div class="box-container">
first Box
</div>
<div class="box-content">
first box content goes here.
</div>
</div>
<div class="box">
<div class="box-container">
second Box
</div>
<div class="box-content">
second box content goes here.
</div>
</div>
<div class="box">
<div class="box-container">
third Box
</div>
<div class="box-content">
third box content goes here.
</div>
</div>
<div class="box">
<div class="box-container">
fourth Box
</div>
<div class="box-content">
fourth box content goes here.
</div>
</div>

</div>

CSS

.boxes{
  width:900px;
  height:600px;
}
.box{
  border: 2px solid #000;
  width:200px;
  display:inline-block;
}

JavaScript

$(function(){
    $(".box").click( function() {
    $(this).addClass('enlarged');
    var width = $('.boxes').innerWidth() + 'px',
        height = $('.boxes').innerHeight() + 'px';
        console.log(width);
        console.log(height);
    $(this).animate(
    {
      "height": height,
      "width": width
    },500);

    $(this).find(".box-container").hide();
    $(this).find(".box-content").show();

    $(".box").not(this).hide();
});  

$('.close').click(function(){
var hgt = $('.box:not(.enlarged)').height();
$('.enlarged').animate({
"height": hgt,
"width": "200px"
});
$('.enlarged .box-container').fadeIn();
$(".box").fadeIn();
});

  });