title: slidetoggle with simultaneous animation on other element
body: <p>I have a webpage with basically 2 sections: a header area and a content area. Header is fixed i.e.     <code>position:fixed</code> and is always at the top. There are a few elements in the header section and I want to use slide functionality on that.</p>
  
  <p>I've set appropriate <code>padding-top</code> for the content area. But I need to change it when the sliding of the header elements executes. Its working with a simple <code>.CSS</code> method.</p>
  
  <p>Sample code: <a href="http://jsfiddle.net/kK7nJ/" rel="nofollow">http://jsfiddle.net/kK7nJ/</a></p>
  
  <p>I would like it to have simultaneous animation: i.e. when the menu is being displayed the content should be pushed down at the same time. Right now it is happening one after the other.</p>
  
  <p>Please help.</p>