CODEWITHSUNDEEP
javascriptjqueryaccordionslidetoggle
Z0idberg
Z0idberg

Reputation: 43

Multiple divs - Horizontal slide out content

I've been staring at my monitor all day perhaps too long where I'm making the problem too complicated when it's quite simple. Hoping somewhere here can slap me digitally and point me in the right direction.

Three elements floated left and positioned absolute within a container. On toggle of each element opens up to reveal sliderContent which is hidden by default. Once clicked the surrounded elements are pushed aside not overlapped.

Code: 

<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 thus far: http://jsfiddle.net/ywL5n4w9/2/

To help explain I've made a superb image.

Hopefully that makes sense, It may be gobbledegook and for that I blame 11 + cups of coffee.

Upvotes: 1

Views: 437

Answers (1)

danielaKay
danielaKay

Reputation: 189

Your items are positioned absolutely, which roughly means that they loose their ability to influence other elements, which includes pushing them aside.

If you change your .item from position:absolute to float:left and also remove the position:absolute from the .slideContent, it seems to work.

New jsfiddle here

Upvotes: 2

Related Questions