jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed

Question

I have a hidden panel off the left side of the screen which slides into view on the click of a 'tab' positioned on the left side of the screen. I need the panel to slide over the top of the existing page content, and I need the tab to move with it. and so both are absolutely positioned in css. Everything works fine, apart from I need the tab (and thus the tab-container) to move left with the panel when it is revealed, so it appears to be stuck to the right-hand-side of the panel. Its relatively simple when using floats, but of course this affects the layout of the existing content, hence absolute positioning. I have tried animating the left position of the panel-container (see the documented jquery function), but I cant get it to work.

This is an example of the original code which i have changed, how can I get the button/tab to slide aswell?

http://www.iamkreative.co.uk/jquery/slideout_div.html

My HTML

<div><!--sample page content-->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
    </p>
</div>

<div id="panel" class="height"> <!--the hidden panel -->
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
    </div>  
</div>

<!--if javascript is disabled use this link-->
<div id="tab-container" class="height">
    <a href="#" onclick="return()">
        <div id="tab"><!-- this will activate the panel. --></div> 
    </a>
</div>

My jQuery

$(document).ready(function(){

$("#panel, .content").hide(); //hides the panel and content from the user

$('#tab').toggle(function(){ //adding a toggle function to the #tab
    $('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px

    // THIS NEXT FUNCTION DOES NOT WORK -->
    function() {
        $('#tab-container').animate({left:"400px"} //400px to match the panel width
        });

    function() {
        $('.content').fadeIn('slow'); //slides the content into view.
        });  
},

function(){ //when the #tab is next cliked
    $('.content').fadeOut('slow', function() { //fade out the content 
        $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0
    });
   });

  });

and this is the css

#panel {
position:absolute;
left:0px;
top:50px;
background-color:#999999;
height:500px;
display:none;/*hide the panel if Javascript is not running*/
}

#panel .content {
width:290px;
margin-left:30px;
}

#tab-container{
position:absolute;
top:20px;
width:50px;
height:620px;
background:#161616;
}

#tab {
width:50px;
height:150px;
margin-top:100px;
display:block;
cursor:pointer;
background:#DDD;
}

Many thanks

Overplus

Answer 1

I started again from scratch, and actually read the jQuery docs hehe. I put both the panel and the button in an absolutely positioned div, floating them both left. Gave the container a negative left position, then put a jQuery toggle action on the button.

$('#button').toggle(function() {

    $('#slider').animate({
        left: '+=200'
        }, 458, 'swing', function() {

        // Animation complete. CALLBACK?

    });

}, function() {

    $('#slider').animate({
        left: '-=200'
        }, 458, 'swing', function() {

        // Animation complete. CALLBACK?

    });

});

Overplus

Answer 2

I stumbled across this post when trying to accomplish the same task.

Unfortunately Matt's answer will no longer work with the latest version of jQuery. At the time Matt's answer was written, jQuery had two .toggle functions. At the time I am writing this the one utilized in his answer has been deprecated. If Matt's code is used, the entire div will just disappear, button and all. (And if you are like me that will be very confusing until you dig in to the api documentation and find out about the change)

I was able to get my functionality working with the following code:

HTML:

<div id="siteMap">
 <div id="mapButton">Site Map</div>
 <div id="theMap">[The Site Map Goes Here]</div>
</div>

CSS (I know this isn't very clean yet):

#siteMap {
  width:500px;
  position:fixed;
  left:-500px;
  top:157px;
  display:block;
  color:#FFF;
  z-index:2;
  opacity: 0.95;
}
#siteMap #mapButton {
  display:block;
  color:#333;
  background-color:#ACACAC;
  padding:2px 5px;
  height:20px;
  width:70px;
  text-align:center;
  position:relative;
  left: 100%;
  margin-top:80px;
  cursor:pointer;

  transform-origin:     0% 0%;
  -ms-transform-origin:     0% 0%;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin:        0% 0%;
  -o-transform-origin:      0% 0%;

  transform:           rotate(-90deg);
  -ms-transform:     rotate(-90deg); 
  -webkit-transform: rotate(-90deg); 
  -moz-transform:    rotate(-90deg); 
  -o-transform:      rotate(-90deg);
}
#siteMap #theMap {
  width:100%;
  height:350px;
  background-color:#666;
  margin-top:-104px;
}

And lastly the JavaScript:

<script type='text/javascript'>
  $(document).ready(function() {
    $('#mapButton').click(function() {
      var mapPos = parseInt($('#siteMap').css('left'), 10);
      if (mapPos < 0) {
        $('#siteMap').animate({
          left: '+=500'
          }, 458, 'swing', function() {
            // Animation complete.
          });
      }
      else {
        $('#siteMap').animate({
          left: '-=500'
          }, 458, 'swing', function() {
            // Animation complete.
        });
      } 
    });
  });
</script>

Hopefully if you came here from Google my post will be helpful :)

Randle