how to make popout section scroll smoothly using html, css and jquery

Question

I am working on a site where i have to make a functionality of scrolling a section from left to right and vice versa. Here is the screen shot.

Now what i have to do is if i click on the plus icon showing in blue section then it's section should slightly scroll and extend smoothly from left to right as you can see in next image.

and if i click on the plus icon in pink colored section then it should moves from right to left means the functionality should work vice versa. as it is showing in next image.

I want to know what is the best way to design this functionality using html, css and jQuery

Answer 1

There is an other example using jquery animate I hope it helps:

width=$('#ppp').width();
$('.sec button').click(function(){
$(this)
.parents('.sec').animate({width:width*0.15-20})
.siblings('.sec').animate({width:width*0.85-20});

$('.sp').toggleClass('flip');
});

.sec{
  width:calc(50% - 20px);
  display:inline-block;
  text-align:center;
  vertical-align:middle;
  height:90px;
}

.sec button{
margin-top:30px;
vertical-align:middle;
}

.sp{
transition:0.5s all;
display:inline-block;
vertical-align:middle;
margin:0;
width:0px;
}

.sp-r{
border-top: 90px solid red;
border-right: 20px solid transparent;
margin-right:-10px;
}

.sp-r.flip{
border-top:0 transparent;
border-bottom: 90px solid red;
}

.sp-l{
border-bottom: 90px solid green;
border-left: 20px solid transparent;
margin-left:-10px;
}

.sp-l.flip{
border-bottom:0 transparent;
border-top: 90px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ppp">
<div class="sec" style="background:red;">

<button>+</button>
</div><!--
--><DIV CLASS="sp sp-r"></DIV><!--
--><DIV CLASS="sp sp-l"></DIV><!--
--><div class="sec" style="background:green;">
  <button>X</button>
</div>
</div>