Показать или спрятать плавно div, изменить стиль другого при нажатии

Вообще плавное изменение div.

by Alexander Lashchevsky

HTML

<div class="hide"></div>
<div class="show"></div>

<div class="container">
	<div class="content">Первый</div>
	<div class="sidebar">Второй</div>
</div>

CSS

.hide {width: 30px; height: 30px; background: red; margin: 0 auto;}
.show {width: 0px; height: 0px; background: green; margin: 0 auto;}

.container {width: 1000px; margin: 0 auto;}
.content {width: 700px; float: left; background: #ccc; height: 3000px;}
.sidebar {width: 300px; float: right; background: #000; height: 500px; color: red; overflow: hidden;}

JavaScript

$('.hide').click(function(){ 
	$('.content').animate({width:'1000px'},1000);
	$('.sidebar').animate({width:'0px'},1000);
	$('.hide').animate({width:'0px', height:'0'},0);
	$('.show').animate({width:'30px', height:'30px'},0);
});


$('.show').click(function(){ 
	$('.content').animate({width:'700px'},1000);
	$('.sidebar').animate({width:'300px'},1000);
	$('.hide').animate({width:'30px', height:'30px'},0);
	$('.show').animate({width:'0px', height:'0'},0);
});