title: Jquery SlideToggle divs to slide (animate) up
body: <p>I want to know how can you make this perfect example slide up instead of pushing the 'navs' down</p>
  
  <p><a href="http://jsfiddle.net/NPRfM/3/" rel="nofollow">http://jsfiddle.net/NPRfM/3/</a></p>
  
  <p>...right now, it reveals from top to bottom (pushes the menu down)...I want the reverse..meaning boxes slide up to reveal and pushes navs up - clicking on one pushes the menu up to reveal the boxes.</p>
  
  <p>That fiddle is on the mark on what I want to do only I want it slide up to reveal</p>
  
  <p><strong>I tried something like this but no go</strong></p>
  
  <pre><code>.animate({scrollTop: $('.dropdown').offset().top}, 250);
  </code></pre>
  
  <p>do I have to also use some css positioning to have it offset? ...still learning the ropes on jquery</p>
  
  <p><strong>UPDATE**</strong></p>
  
  <p>HERE is what i want it to do:</p>
  
  <p><a href="http://jsfiddle.net/WFxLJ/1169/" rel="nofollow">http://jsfiddle.net/WFxLJ/1169/</a></p>
  
  <p>....The only issue is, I cant figure a way to do it like the first jfiddle...where it kind of has 2 functions.</p>
  
  <p>-==click div 1===slides up -reveals content of div 1 (in same section 2)</p>
  
  <p>====click div 2 after ======shows content of div 2 (in same section of 1)</p>
  
  <p>=====click div 2 again=======slides down the box to hide section </p>
  
  <p>and vice -versa</p>
  
  <p>Hope I make sense.</p>
  
  <p><strong>Update 2**</strong></p>
  
  <p>I almost got it! Check the jfiddle:</p>
  
  <p><a href="http://jsfiddle.net/b7C2d/315/" rel="nofollow">http://jsfiddle.net/b7C2d/315/</a></p>
  
  <p>So the only thing left is the menu (black) needs to push up so it looks like it reveals...I assume this is just CSS is it the fixed positioning..(changing it to relative just messes it)?</p>
  
  <p>I have found a site that does this:</p>
  
  <p><a href="http://www.deancare.com/" rel="nofollow">Dean</a></p>
  
  <p>But their code is more complicated then it should be.... plus it looks like from 2001 (no way I am going to try to mess with this code)..but anyways thats what i want to do.</p>
  
  <p><strong>Update 3**</strong></p>
  
  <p>This is the closest I can get it but it is acting like its missing a few screws :(</p>
  
  <p><a href="http://jsfiddle.net/b7C2d/347/" rel="nofollow">http://jsfiddle.net/b7C2d/347/</a></p>