单击HTML展开框

我没有使用你的html代码，但试图获得尽可能接近你的gif:的结果

$('.box').on('click', function() {
    var $element = $(this);
    
    var $openElement = $('<div class="absoluteBox"></div>');
    
    $openElement.css('left', $element.position().left);
    $openElement.css('right', $element.width());
        
    $element.html($openElement);
    
    $openElement.animate({left : 0, width : $('.wrapper').width()}, 500);
   
});

.wrapper {
    position:relative;
    display:inline-block;
}
.box {
    background-color:#CC0000;
    width:150px;
    height:200px;
    display:inline-block;
    margin-right:10px;
 }
.box:last-of-type {
    margin-right:0;
}
.absoluteBox {
    position:absolute;
    background-color:blue;
    height:200px;
    width:150px;
}
.box:hover {
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="box"></div>
    <div class="box">
    </div>
    <div class="box"></div>
</div>

我把打开的盒子改成蓝色，以便更好地引起注意。当然，这必须通过css更改为红色。

更新了你的小提琴：

第2版：
现在，当您单击该框时，它应该会重置。

第页。S.单击第二个框以获得效果
P.P.S.由于页面在JSFiddle中自动收缩，因此效果显示不正确。尽管如此，如果你在其他地方尝试，但它不起作用，那就认为我错了！

编辑：
已更新答案以展开单击的元素。

https://jsfiddle.net/bszv7f90/9/

$(".row.boxes-container .box").click(function(e) {
  $(this).children().each(function(i) {
    if ($(this).attr('class') == 'box-content-full') {
      $(this).toggleClass("exp");
    }
  });
  $(".box-content-full").toggleClass("open");
  $(".box-content").toggleClass("clicked");
});

.container {
  max-width: 600px;
}
.row.boxes-container {
  position: relative;
}
.box:hover {
  cursor: pointer;
}
.box-content {
  padding: 30px;
  background-color: #f03939;
}
.box-content-full {
  display: none;
  width: 0%;
  transition: width 1s;
}
.box-content {
  padding: 30px;
  background-color: #f03939;
}
.box-content.clicked {
  display: none;
}
.box-content-full.open {
  position: absolute;
  max-width: 0%;
  width: 0%;
  z-index: 2;
  display: none;
  transition: width 1s;
}
.box-content-full.open.exp {
  position: absolute;
  max-width: 100%;
  width: 100%;
  z-index: 2;
  display: block;
  transition: width 1s;
}
.box-content-full.open .inner {
  padding: 30px;
  margin-left: 15px;
  margin-right: 15px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row boxes-container">
    <div class="box first">
      <div class="box-content-full">
        <div class="inner">
          <div class="inner-header">
            <span class="close">x</span>
          </div>
          <h3>Box 1</h3>
          <p>Lorem ipsum dolem filum</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="box-content">
          <h3>Box 1</h3>
        </div>
      </div>
    </div>
    <div class="box second">
      <div class="box-content-full">
        <div class="inner">
          <div class="inner-header">
            <span class="close">x</span>
          </div>
          <h3>Box 2</h3>
          <p>Lorem ipsum dolem filum</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="box-content">
          <h3>Box 2</h3>
        </div>
      </div>
    </div>
    <div class="box third">
      <div class="box-content-full">
        <div class="inner">
          <div class="inner-header">
            <span class="close">x</span>
          </div>
          <h3>Box 3</h3>
          <p>Lorem ipsum dolem filum</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="box-content">
          <h3>Box 3</h3>
        </div>
      </div>
    </div>
  </div>
</div>

现在它应该扩大了。我保留了你的代码，以便快速复制粘贴。