я если честно, очень сильно затупил))

имел ввиду background:white;

спасибо вам еще раз!


----
не всё так просто. надо поиграться с z-index еще. в общем, выложу попозже, как закончу опыты)

ну, естественно, нужно четко задать расположение слоёв по всем трём осям :)

в общем, запутался я окончательно. еще раз задача, есть 4 дива, в них разное кол-во информации (они разные по высоте могут быть). нужно, чтобы они красиво разъезжались при клике.

html:

<div class="firstCat cat current" data-id="1">
</div>
<div class="secondCat cat" style="margin-left:700px;" data-id="2">	
</div>
<div class="thirdCat cat" style="margin-left:800px;" data-id="3">
</div>
<div class="fourthCat cat" style="margin-left:900px;" data-id="4">
</div>

css:

.cat {
	width:720px;
	position: absolute;
	background:white;
	color: gray;
	cursor:pointer;
}
.cat.current {
  color:black;
  cursor:auto;
}
body {
  overflow:auto; 
  overflow-x: hidden;
}

ну и на jquery у меня при клике на элемент меняются марджины других элементов, визуально они «разъезжаются». тольок возник целый ряд проблем, с моими слабыми знаниями вёрстки они просто нерешаемые)

1. слои уехали за страницу (появился горизонтальный скролл, overflow:hidden; не подходит, т.к. страница всё равно растягивается, только скролл пропадает).
2. если один блок больше другого по высоте, его текст видно под ним, см. скриншот.
3. выглядит отвратительно, не представляю что сделать, чтобы можно было нормально воспринимать информацию.
4. т.к. ширина задана абсолютно, проблемы на другом мониторе. как лучше задать ширину и отступ?

скриншот:

чего-нибудь понятно из скриншота?)

что-то ты намудрил :)

высота у слайдов должна быть одинаковая, это никак не обойти.

вот, накидал на скорую руку, возможны косяки, но принцип тот же :)

css:

<style type="text/css">
#acc{
display: block;
position: relative;
width: 960px;
height: 100%;
min-height: 800px !important;
margin: 0 auto;
overflow: hidden;
}
.slide{
display: block;
position: absolute;
width: 960px;
height: 800px; 
float: left;
}
.miniText{
position: relative;
height: auto;
width: 220px;
}
.maxiText{
position: relative;
height: auto;
width: 100%;
display: none;
}
</style>

jquery:

var thisIndex,
	thisMargin;
$(document).ready(function(){
	$("body").click(function(){
	
	});
	
	$(".slide").data("open", false);
	
	$(".slide").click(function(){
	thisIndex = $(this).index();
	if (!($(this).data("open"))){
		$(this).data("thisMargin", $(this).css("marginLeft"));
		$(this).find(".miniText").hide();
		$(this).find(".maxiText").show("slow");
		$(this).animate({"marginLeft": 0}, 1000);
		$(".slide").data("open", true);
		
		$(".slide").each(function(){
   			 var slide = $(this);
			 slide.data("defaultML", slide.css("marginLeft"));
			 if (slide.index() < thisIndex ){
			  slide.animate({"marginLeft": 0}, 1000);
			 }
			 if (slide.index() > thisIndex ){
			  slide.animate({"marginLeft": 960}, 1000);
			 }
		});
	
	}
	else {
		$(this).find(".miniText").show("slow");
		$(this).find(".maxiText").hide();
		$(this).animate({"marginLeft": $(this).data("thisMargin")}, 1000);
		$(".slide").data("open", false);
		
		$(".slide").each(function(){
   			 var slide = $(this);
			 if (slide.index() < thisIndex ){
			  slide.animate({"marginLeft":  slide.data("defaultML") }, 1000);
			 }
			 if (slide.index() > thisIndex ){
			  slide.animate({"marginLeft":  slide.data("defaultML") }, 1000);
			 }
		});
			
	}
	
	});
});

<div id="acc">
	<div class="slide" style="background-color: red; ">
		<p class="miniText"> Текст закрытого блока 1</p>
		<p class="maxiText"> Текст открытого блока 1<br>Текст открытого блока 1<br>Текст открытого блока 1<br>Текст открытого блока 1</p>
	</div>
	<div class="slide" style="background-color: green; margin-left: 220px;">
		<p class="miniText"> Текст закрытого блока 2 </p>
		<p class="maxiText"> Текст открытого блока 2<br>Текст открытого блока 2<br>Текст открытого блока 2<br>Текст открытого блока 2</p>
	</div>
	<div class="slide" style="background-color: blue; margin-left: 440px;">
		<p class="miniText"> Текст закрытого блока 3 </p>
		<p class="maxiText"> Текст открытого блока 3<br>Текст открытого блока 3<br>Текст открытого блока 3<br>Текст открытого блока 3</p>
	</div>
	<div class="slide" style="background-color: orange; margin-left: 680px;">
		<p class="miniText"> Текст закрытого блока 4 </p>
		<p class="maxiText"> Текст открытого блока 4<br>Текст открытого блока 4<br>Текст открытого блока 4<br>Текст открытого блока 4</p>
	</div>
</div>

сделал чуть по-другому, но также))

теперь другой вопрос, самый проблемный для меня: как сделать ширину и отступ динамическими?

нашел вот такую статью, но таким способ в моём случае крайне неудобно делать, задавать абсолютные значения отступов через left и right.

а зачем изменять ширину? пусть ширина слайдов всегда 100%, это ведь не мешает, а отступы можно сделать так:

var a = $(this).index()-2; // получаем порядковый номер предыдущего слайда (индексы начинаются с 1, а eq —с нуля, поэтому минус 2) 
var preSlide = $('.slide').eq(a);
var b = preSlide.css("marginLeft")+preSlide.find('.miniText').width(); // получаем отступ текущего слайда, складывая отступ предыдущего + ширину блока с текстом 

$(this).css("marginLeft", b)

только проверку надо ещё добавить:

если b < 0, то b = 0;

T-sh, а как сделать отступы одинаковокрасивыми и на большом экране, и на ноутбуке?