JSFiddle - React, Tailwind, and code Playground

by silviokucharski

HTML

<div id="content">
  <div id="containerleft">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
    <div id="box5" class="box"></div>
    <div id="box6" class="box"></div>
  </div>
</div>

CSS

body {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

#content {
  width: 450px;
  height: 250px;
  position: relative;
  top: 50px;
}

.box {
  z-index: 0;
}

.box.active {
  position: absolute;
  z-index: 9000;
}

#containerleft {
  width: 450px;
  height: 250px;
}

#box1 {
  width: 66%;
  height: 50%;
  background: pink;
  float: left;
  z-index: 99;
}

#box2 {
  width: 33%;
  height: 25%;
  background: gray;
  float: left;
}

#box3 {
  width: 33%;
  height: 25%;
  background: black;
  float: left;
}

#box4 {
  width: 33%;
  height: 50%;
  background: green;
  float: left;
}

#box5 {
  width: 33%;
  height: 50%;
  background: yellow;
  float: left;
}

#box6 {
  width: 33%;
  height: 50%;
  background: blue;
  float: left;
}

JavaScript

$("body").delegate('.box', 'click', function() {

  if ($('.box.active').length <= 0) {

    $(this).addClass('cloned');

    var parent = $(this).parent();
    var pos = $(this).position();
    var clone = $(this).clone().addClass('active');
    $(this).css({
      left: pos.left + 'px',
      top: pos.top + 'px'
    });

    parent.append(clone);

    clone.css({
      left: pos.left + 'px',
      top: pos.top + 'px'
    }).animate({
      width: '100%',
      height: '100%',
      top: 0,
      left: 0
    }, 300);

  }


});

$("body").delegate('.box.active', 'click', function() {

  var cloned = $('.box.cloned');
  var clone = $('this');
  var pos = cloned.position();
  var w = cloned.width();
  var h = cloned.height();

  $(this).animate({
    width: w + 'px',
    height: h + 'px',
    top: pos.top + 'px',
    left: pos.left + 'px'
  }, 300, function() {
    $('.box.active').remove();
    cloned.removeClass('cloned');
  });

});