Audyx panel stretch animation

by sungsoonz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="panel" id="panel_1">
                <h2>Anamnesis</h2>
                <button> <i class="fa fa-expand"></i>
 <i class="fa fa-compress"></i>
                </button>
                <div>History of the deafness<a class="content-toggle">...</a></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel" id="panel_2">
                <h2>Panel 2</h2>
                <button> <i class="fa fa-expand"></i>
 <i class="fa fa-compress"></i>

                </button>
            </div>
            <div class="panel" id="panel_3">
                <h2>Panel 3</h2>
                <button> <i class="fa fa-expand"></i>
 <i class="fa fa-compress"></i>

                </button>
            </div>
            <div class="panel" id="panel_4">
                <h2>Panel 4</h2>
                <button> <i class="fa fa-expand"></i>
 <i class="fa fa-compress"></i>

                </button>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    background: #eee;
    margin: 0;
    padding: 0;
}
a:hover {
    text-decoration: none;
}
h2 {
    display: inline-block;
    margin-top: 0;
}
.container-fluid {
    padding: 0;
    margin: 15px;
}
.row div {
    -webkit-transition: width 0.5s ease, margin 0.5s ease;
    -moz-transition: width 0.5s ease, margin 0.5s ease;
    -o-transition: width 0.5s ease, margin 0.5s ease;
    transition: width 0.5s ease, margin 0.5s ease;
}
.col-xs-6 .content-toggle {
    display: none;
}
.content-toggle {
    background-color: #eee;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;  
    margin-left: 20px;
}
.panel {
    background: #fff;
    padding: 15px;
    height: 400px;
    border-radius: 0;
}
.col-xs-12 #panel_1 {
    height: 200px;
}
.col-xs-6 #panel_1 {
    height: 600px;
}
.col-xs-12 #panel_2,
.col-xs-12 #panel_3,
.col-xs-12 #panel_4 {
    height: 700px;
}
#panel_1 {
    border-top: 3px solid red;
}
#panel_2 {
    border-top: 3px solid green;
}
#panel_3 {
    border-top: 3px solid blue;
}
#panel_4 {
    border-top: 3px solid purple;
}
button {
    background: none;
    border: 0;
    float: right;
    background: #eee;
    padding: 5px;
}
.fa-compress {
    display: none;
}

JavaScript

var lastTrigger;
var target;

$('a.content-toggle').click(function() {
    var toggleHeight = $('#panel_1').outerHeight() == 800 ? "200px" : "800px";
    $('#panel_1').animate({ height: toggleHeight }); 
});

$('button').click(function () {
    $('.fa-compress').toggle();
    $('.fa-expand').toggle();
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
    lastTrigger = $(this).closest('div').attr('id');
    if ($('#panel_1').parent('.col-xs-6').length) {
        $('#panel_1').height(600);
        $('html, body').animate({ scrollTop: 0 }, 'slow');
    } else {
        $('#panel_1').height(200);
        scrollView();
    }
});

function updateOffset() {
     target = $('#' + lastTrigger);
     var currentOffset = target.offset().top; 
     return currentOffset;
}

function scrollView() {
    setTimeout(function () {
        $('html,body').animate({
            scrollTop: updateOffset()
        }, 1000);
    }, 500);
}