Edit in JSFiddle

$(function() {

    var prevPos = [];

    // 각자의 위치 저장
    (function() {
        $(".box").each(function(i) {
            prevPos.push($(this).position());
        });
    })();

    $(".box.clickable").on("click", function() {

        if ($(this).is(":animated"))
            return;

        // 확대되어 있으면
        if ($(this).hasClass("on")) {

            var thisIdx = $(this).index();
            $(this).removeClass("on").show().stop().animate({
                "top": prevPos[thisIdx].top,
                "left": prevPos[thisIdx].left,
                "width": "100px",
                "height": "100px",
                "z-index": 10
            }, 1000, "easeOutBack", function() {
                $(this).children(".contents").hide();
            });

            $(this).siblings().each(function() {
                var siblingIdx = $(this).index();
                $(this).show().stop().animate({
                    "top": prevPos[siblingIdx].top,
                    "left": prevPos[siblingIdx].left,
                    "opacity": 1,
                    "z-index": 10
                }, 1000);
            });
        // 확대되어 있지 않으면
        } else {
            $(this).siblings().each(function() {
                var rdmTop = Math.floor((Math.random() * 600) - 150) + "px";
                var rdmLeft = Math.floor((Math.random() * 600) - 150) + "px";

                $(this).css("z-index", 11).stop().animate({
                    "top": rdmTop,
                    "left": rdmLeft,
                    "opacity": 0
                }, 1000, function() { $(this).hide(); });
            });

            $(this).css("z-index", 10).addClass("on").stop().animate({
                "width": "300px",
                "height": "300px",
                "top": 0,
                "left": 0
            }, 1000, "easeOutBack", function() {
                $(this).children(".contents").fadeIn(500);
            });
        }

    });

});

<div id="container">
    <div id="box-wrapper">
        <div class="box clickable">
            <div class="title" style="top: 0; left: 0;">TEXT1</div>
            <div class="contents">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
        </div>
        <div class="box" style="top:0; left: 100px;"></div>
        <div class="box" style="top:0; left: 200px;"></div>
        <div class="box" style="top: 100px; left: 0;"></div>
        <div class="box clickable" style="top: 100px; left: 100px;">
            <div class="title">TEXT2</div>
            <div class="contents">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
        </div>
        <div class="box" style="top: 100px; left: 200px;"></div>
        <div class="box" style="top: 200px; left: 0;"></div>
        <div class="box" style="top: 200px; left: 100px;"></div>
        <div class="box clickable" style="top: 200px; left: 200px;">
            <div class="title">TEXT3</div>
            <div class="contents">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
        </div>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
}
#container {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
#box-wrapper {
  display: inline-block;
  position: relative;
  top: 200px;
  width: 300px;
  height: 300px;
  font-size: 0;
}
.box {
  position: absolute;
  float: left;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow: 0 0 1px #000;
  overflow: hidden;
  background-color: #fff;
}
.clickable {
  cursor: pointer;
}
.title {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #33d113;
  text-align: center;
  font-size: 20px;
  line-height: 100px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}
.contents {
  display: none;
  position: absolute;
  top: 100px;
  width: 100%;
  height: 200px;
  font-size: 20px;
}