Slide in fixed div from right page margin

JavaScript
1

What I want:
An images of a phone is in a fixed position on the right side of the page. When it is clicked, a div with a phone number slides in from the right (pushing the image of the phone left with it). When the image of the phone is clicked again, it slides to the right and is no longer visible again.

I’ve been trying this out with jQuery for a while and cant seem to get anything to work (came close once but it only worked in firefox for some reason =/)

Can anyone help?

edit: Good example: http://thedemo.ca/

2

Update… getting close. This slides in from the right, but the image of the phone first jumps to the location where it will be pushed to and then waits for the slide to catch up. I need it to move smoothly. Any modifications you can see?

in head
[

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  #slidemarginleft { margin: 0px; float:right; padding:5px; position: relative;float:right;background:#fff;text-align:center;border:2px green solid;border-right:0; }
  #holdright{position:fixed;top:150px;right:0;}
</style>
  <script>
  $(document).ready(function() {
    $("#slidemarginleft").hide();
$("#holdright img").click(function () {
      $("#slidemarginleft").toggle("slide", { direction: "right"}, 1000);

});

  });
  </script>

in body

<div id="holdright">
<img id="calltoggle" src="callus.gif" alt="Call Us" style="padding:2px;background:white;border:2px green solid;border-right:0;border-left:0;" />
<div id="slidemarginleft" class="slide">
<p style="font-weight:bold;font-size:16px;">Give Us A Call!<br/><span class="phonenum">555.555.5555</span></p>
</div>