Make height of div container smaller when nested divs slide out

Question

I'm trying to make the height div.container smaller whenever the divs inside of the div.container slide out on click, but the height of the div continues to stay the same height.

I also want the div that hasn't been clicked yet to slide into place of the div that has been clicked.

Here's my JSFiddle: https://jsfiddle.net/ispykenny/soysd2zu/ Any help would be very helpful! Thanks! and here's the code.

<div class="container">

<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>

.container{
    background-color:green;
}
.two{
    width:300px;
    margin-left:auto;
    margin-right:auto;
    cursor:pointer;
    background:#666;
    text-align:center;
    padding:10px;
    font-size:10px;
    border:1px solid black;
    position:relative;

}
.three{
    width:300px;
    margin-left:auto;
    margin-right:auto;
    cursor:pointer;
    background:#666;
    text-align:center;
    padding:10px;
    font-size:10px;
    border:1px solid black;
    position:relative;


}

$(document).ready(function(){
    $('.two').click(function(){
        $(this).animate({right:"1500px"},'5000');
    });
       $('.three').click(function(){
        $(this).animate({left:"1500px"},'5000');
    });
});  

Answer 1

Seemed like you need to make a style 'display' of your clicked div to set 'none' after animation is completed. But in this way there will not be any animation of vanishing in that empty field.

$(document).ready(function(){
$('.two').click(function(){
    $(this).animate({right:"1500px"},'5000', function() {
        $(this).css("display", "none")
    });
   $('.three').click(function(){
    $(this).animate({left:"1500px"},'5000', function() {
        $(this).css("display", "none")
    });
});  

Answer 2

Use slideUp to move the remaining blocks smoothly.

$(document).ready(function () {
    $('.two').click(function () {
        $(this).animate({
            right: "1500px"
        }, '5000', function() { $(this).slideUp(); });
    });
    $('.three').click(function () {
        $(this).animate({
            left: "1500px"
        }, '5000', function() { $(this).slideUp(); });
    });
});

Updated JSFiddle

Answer 3

https://jsfiddle.net/mblenton/soysd2zu/3/

$(document).ready(function () {
    $( '.two' ).click(function() {
      $( this).animate({
         right: "1500px"
      }, 1000, function() {
        $(this).remove();
      });
    });
    $( '.three' ).click(function() {
      $( this).animate({
         left: "1500px"
      }, 1000, function() {
        $(this).remove();
      });
    });    
});