Flex resize animation

by davidpenuelab

HTML

<div class="container1">
    <div class="item_top" id="item1" style="background: red">a</div>
    <div class="item_top" id="item2" style="background: green">b</div>
</div>
<div class="container2">
    <div class="item_bottom" id="item3" style="background: blue">c</div>
    <div class="item_bottom" id="item4" style="background: purple">d</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;    
}

.container1 {
    flex-basis: auto;
    display: flex;
    height: 80%;
}
.container2{
    flex-basis: auto;
    display: flex;
    height: 20%;  
}

.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    transition: all 500ms;
}
#item1{
  width: 80%;
}
#item2{
  width: 20%;
}
#item3{
  width: 20%;
}
#item4{
  width: 20%;
}

.collapse {
    flex-grow: 0.001;
}

JavaScript

$(".item_top").click(function() {
    $(".item").addClass("collapse");
    $(this).removeClass("collapse");    
});
$(".item_bottom").click(function() {
    $(".item").addClass("collapse");
    $(this).removeClass("collapse");    
});