Newbie Question - Resizing divs with slideToggle

Newbie Question - Resizing divs with slideToggle

Hi,

I am trying to get my divs to resize but i am having a number of difficulties. I am new to jQuery so be gentle! :-) 

Here is what i am trying to achieve: 

1) When the "About me" div is clicked - resize the "About Me" div and hide the other divs. (Which i have managed to get working) 

2) When the initial animation has finished, wait for another click before resizing the div to its original size/position. (This is working but I have had to use the delay function to "pause" the animation - which is not ideal).

Here is my code so far: 

$(document).ready(function(){

$("#about_div").live("click", function(){
$("#about_div").die();
  $(".work_divs").slideUp();
 
 
 
   $(this).animate({width: "+=71.5%", height: "+=15%"}, 150);

   $("div[id=about_div]").slideToggle("slow").delay(1800);

     $(this).animate({width: "-=71.5%", height: "-=15%"}, 600);
   
  $("div[id=about_div]").die();
   
$("#about").die();
$(".div_contents").fadeOut(300).delay(2800).fadeIn(600);
$(".div_contents").die();
 $(".work_divs").delay(2800).slideDown(600);
 
       return false;
 
 
  });
   });





<ul id="navs">
<li>
<div id="about_div" class="work_divs">
<a href="" id="about" class="link">ABOUT</a>
      <img src="images/orange_hash.png" alt="orange_hash" width="24" height="24" class="orange_hash"/>

      <div class="div_contents">
      This will be the About me content!
      </div>

</div>
</li>


Any help would be great. 

Cheers

Mike