JQuery slide effect and floating elements

Question

I would like to do something like you can see on this image:

That is: A slidable div and side div following the slidable div. I use this code:

<div id="container">
<div id="side" style="float:right;" onclick="$('#slidable').toggle('slide');">…</div>
<div id="slidable" style="float:right;">…</div>
</div>

My issue is that the side div only starts to move when the slidable div has finished to slide. How can I do to make both divs animated at the same time ?

You can see the full example here : http://jsfiddle.net/azmeuk/QgD5Y/7/

Answer 1

Have a look at this code

HTML

   <div id="container">
        <div id="slidable"class="hide">Foobar</div>
        <div id="side">+</div>
    </div>

I have added a class 'hide' to div with id="slidable" just to hide it when the page loads. If you don't want it, you may remove.

CSS (Only change is I have added hide class)

#side{
    float:right;
    width:50px;
    height:50px;
    background:#BBB;
}

.hide{
    display:none;
}

#slidable{
    float:right;
    height:50px;
    background:#888;
    width:200px;
}

JQuery

  jQuery(document).ready(function($) {
    $( "#side" ).click(function() {
     $('#slidable').animate({width: 'toggle'});
      });
  })

JSFiddle Demo

Answer 2

Here try this instead:

  jQuery(document).ready(function($) {
    $( "#side" ).click(function() {
      $( "#slidable" ).animate({width: 'toggle'});
      });
  });

Answer 3

using jquery UI for this kind of matter is an overkill for me...
well, we're here already so, what I could suggest is for you to use toggleClass() instead...

like this demo

add some css

#slidable.open {
    margin-right: -200px
}

and change your jQuery codes to

jQuery(document).ready(function($) {
    $( "#side" ).click(function() {
      $( "#slidable" ).toggleClass( "open", 500 );
      });
  });