Как скрыть/показать div с помощью javascript

Я хочу скрыть/показать с помощью div в html, но таким образом.

Вот мой html:

<div id="left"></div>
<div id="middle"> 
<input type="button" id="button"/>
</div>
<div id="right"></div>

А это мой css:

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
 float:left;
 width:11%;
 height:570px;
 margin:0;
}

Я хочу сделать это, когда я нажимаю кнопку на div center, чтобы скрыть div справаи расширьте div влеводля размера div right, а затем переместите div centerполностью вправо. Я хочу скрыть/показать их с горизонтальной анимацией, например, слева направо или справа налево. Игра со словами может быть сложной, поэтому я сделал несколько картинок, чтобы вы могли понять, о чем я говорю:

Начальная фаза:

И конечная фаза: