Доброго времени суток. Цель такова: есть два 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>