Несколько divs - Горизонтальное выскальзывание

Question

Я смотрел на свой монитор весь день, возможно, слишком долго, когда я делаю проблему слишком сложной, когда это довольно просто. Надеюсь, что где-то здесь может ударить меня по цифровым каналам и указать мне в правильном направлении.

Три элемента плавают слева и расположены абсолютно внутри контейнера. При переключении каждого элемента открывается, чтобы показать sliderContent, который скрыт по умолчанию. После щелчка окружающие элементы отбрасываются в сторону, а не перекрываются.

Код:

<ul class="accordion"> 

<li class="item one"> 
    <div class="slideContent"> 
      Slider content 
    </div> 

</li> 
<li class="item two"> 

    <div class="slideContent"> 
      Slider content 
    </div> 

</li> 
<li class="item three"> 

    <div class="slideContent"> 
      Slider content 
    </div> 

</li> 

.accordion { 
    list-style:none; 
    position:relative; 
} 


.item { 
    width:25%; 
    height:200px; 
    background:#ccc; 
    z-index: 0; 
    margin-top: 10px; 
    left: 0; 
    position: absolute; 
} 

.slideContent { 
    background:white; 
    position:absolute; 
    height:100%; 
    width:100%; 
} 

.one { 
    background:black; 
} 
.two{ 
    background:green; 
    left: 25%; 
} 
.three { 
    background:blue; 
    left:50%; 
} 
.four { 
    left: 75%; 
} 

JS:

$('.slideContent').hide(); 


$('li.item').click(function(){ 
    $(this).css({zIndex: 9999}).animate({left:'0px', width: '100%'}) 
    $(this).$('.slideContent').show(); 
}); 

Fiddle до сих пор: http://jsfiddle.net/ywL5n4w9/2/

Чтобы объяснить, что я сделал превосходное изображение.

Надеется, что имеет смысл, может быть gobbledegook и что я виню 11 + чашки кофе.

Answer 1

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

Если вы меняете .item от position:absolute к float:left, а также удалить position:absolute из .slideContent, кажется, работает.

Новый jsfiddle here