Question

I’m making a sliding div with jQuery UI, but i have a problem.

I have an outer DIV and 2 inner DIV that are left floated. On the first inner DIV i have the sliding effect.

<div id="outer">
    Outer Div
    <p><a href="#" id="SlideOut">Slide Out</a></p>
    <p><a href="#" id="SlideIn">Slide In</a></p>

    <div id="inner">inner</div>
    <div id="inner2">inner2</div>
</div>

---

    $("#SlideOut").click(function(){
    $("#inner").hide("slide",{direction: 'left'},1000);
});

$("#SlideIn").click(function(){
        $("#inner").show("slide",{direction: 'left'},1000);

});

The problem is that the second DIV doesn’t follow the first div.

It is hard to explain, so here is a fiddle where u can maybe understand better my problem.
http://jsfiddle.net/xFx26/1/

In short, i want that the second inner div will slide together the first inner div.

Answer 1

You should be using animate() and changing the width, rather than sliding. The slide slides the contents and then hides the actual container. Updated fiddle.

Code:

$("#SlideOut").click(function(){
    $("#inner").animate({width: 0},1000);
});

$("#SlideIn").click(function(){
     $("#inner").animate({width: 200},1000);
});