Javascript-форум - Раздвижение элементов одним событием

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Раздвижение элементов одним событием (https://javascript.ru/forum/dom-window/36563-razdvizhenie-ehlementov-odnim-sobytiem.html)

Раздвижение элементов одним событием

Доброго времени суток. Цель такова: есть два div'а по центру - нужно сделать так, чтобы div'ы по клику на любой из этих двух раздвигались и между ними появлялся ещё один.

Пытался сделать собственноручно, но столкнулся с проблемой. Левый div смещается и появляется центральный div (собственно, как и должно быть), но не смещается правый div влево на то же расстояние, что и левый, из-за чего правый div переходит на новую строку. Решением вижу только одинаковое смещение левого и правого div'ов. Грубо говоря, нужно обработать одним кликом два div'a.

Заранее благодарю за помощь.

Вот то, что получилось у меня.

<body>
<style>
html { margin:0px; padding:0px; border:0px;}
body {font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:17px; background: #000000;}
a {text-decoration: none;}
p {margin:0;}
img {border: 0 none;}
.custom {}

#main {}

#left {margin-top:4%; margin-left:660px; float:left;

position: relative;
  right: 0;
  -moz-transition: right 1s cubic-bezier(0.0,0.5,0.5,1.0);
  -webkit-transition: right 1s cubic-bezier(0.0,0.5,0.5,1.0);
  -ms-transition: right 1s cubic-bezier(0.0,0.5,0.5,1.0);
  -o-transition: right 1s cubic-bezier(0.0,0.5,0.5,1.0);
  transition: right 1s cubic-bezier(0.0,0.5,0.5,1.0);
}
#menu-left {float:left;}
#menu-left-1 {}
#menu-left-2 {}
#menu-left-3 {}
#menu-left-4 {}
#content {float:left; width:920px; height:800px; background:#e9ebad; display:none;}

#right {margin-top:4%;float:left;}
#menu-right {}
</style>

	<div id="main">
    	<div id="left"  onclick="this.style.right='560px'">
        	<div id="menu-left">
            <div id="menu-left-1"><a href="#" onclick="animateDiv();"><img src="111111.png" border="0" alt="" /></a></div>
            </div>
            <div id="content"></div>
        </div>
    	<div id="right">
        	<div id="menu-right">
            	<div id="menu-left-1"><a href="#"><img src="templates/beez_20/img/menu-right/menu-elem-1.png" border="0" alt="" /></a></div>
            </div>
        </div>
        </br clear="all">
    </div>
<script>
function animateDiv(){ 
$('#content').toggle('slow'); 
};
</script>

</body>

<html>
<head>
    <title>slider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            $('.left, .right').click(function () {
                $('.center').animate({width: 200}, 200);
            });
        });
    </script>
    <style type="text/css">
        .slider {
            margin: 50px auto;
            width: 600px;
            text-align: center;
        }
        .slider > div {
            height: 50px;
            width: 100px;
            background: #EEE;
            display: inline-block;
        }
        .slider .center {
            overflow: hidden;
            width: 0;
        }
    </style>
</head>
<body>

    <div class="slider">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>

</body>
</html>

Тим - благодарю от души!)выручил!)прям поклон в пояс тебе!)Реально - большое спасибо!:)

margin: 50px auto;
width: 600px;

думаю можно убрать. погорячился. это выравнивание родительского блока по центру. достаточного того что контент выравнивается.

Да это не главное - я хотел понять саму механику самого раздвижения двух блоков в один клик:)когда увидел - всё сразу понятно стало - уже три дня кряду мучался с этим:)большое тебе спасибо!:)