html - Jquery SlideToggle divs to slide (animate) up -

i want know how can make perfect example slide instead of pushing 'navs' down

http://jsfiddle.net/nprfm/3/

...right now, reveals top bottom (pushes menu down)...i want reverse..meaning boxes slide reveal , pushes navs - clicking on 1 pushes menu reveal boxes.

that fiddle on mark on want want slide reveal

i tried no go

.animate({scrolltop: $('.dropdown').offset().top}, 250); 

do have use css positioning have offset? ...still learning ropes on jquery

update**

here want do:

http://jsfiddle.net/wfxlj/1169/

....the issue is, cant figure way first jfiddle...where kind of has 2 functions.

-==click div 1===slides -reveals content of div 1 (in same section 2)

====click div 2 after ======shows content of div 2 (in same section of 1)

=====click div 2 again=======slides down box hide section

and vice -versa

hope make sense.

update 2**

i got it! check jfiddle:

http://jsfiddle.net/b7c2d/315/

so thing left menu (black) needs push looks reveals...i assume css fixed positioning..(changing relative messes it)?

i have found site this:

dean

but code more complicated should be.... plus looks 2001 (no way going try mess code)..but anyways thats want do.

update 3**

this closest can acting missing few screws :(

http://jsfiddle.net/b7c2d/347/

like so?

updated: jsfiddle

/* created shivam bhalla */  (function($) {     $('body').addclass('js');      var $toggler = $('#toggler'),         $wrapper = $toggler.find('.wrapper'),         $pager = $toggler.find('.pager'),         $content = $toggler.find('.content');      $toggler.css('height', $content.height() + $pager.height());     $wrapper.css('top', $content.height());     $content.hide();      $pager.find('a').on('click', function(e) {         var $this = $(this),             $target =  $( $(this).attr('href') ),             $count = 0;          if ($count === 0) {             $wrapper.animate({'top' : 0});             $count = 1;             $this.addclass('selected');         }          if ($target.hasclass('active')) {             $('.selected').removeclass('selected');             $wrapper.animate({'top' : $content.height()}, function() {                 $target.hide().removeclass('active');             });         } else {             $wrapper.find('.active').slideup().removeclass('active');             $target.addclass('active').slidedown();             $('.selected').removeclass('selected');             $this.addclass('selected');         }                 e.preventdefault();                 });    })(jquery); 

p.s: new js, html & css. looks javascript disabled.