что-то ты намудрил
высота у слайдов должна быть одинаковая, это никак не обойти.
вот, накидал на скорую руку, возможны косяки, но принцип тот же
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>