How to animate a menu tab vertically?

Question

Please see this fiddle http://jsfiddle.net/rabelais/L33WB/

  $('#tab a').click(function() {
  $('#menu').slideToggle("slow")
  $('#tab').hide()
  });
  $('#tab-inner a').click(function() {
  $('#menu').slideToggle("slow")
  $('#tab').show()
  });

I want the menu tab to slide down and up again smoothly with the hidden links. How can this be achieved? Should I animate the margin top of the outer menu tab and remove the inner menu tab?

Answer 1

No need for multiple menu buttons, see the updated fiddle. You only need this javascript code, the navi will slide down the menu Button:

$('#tab a').click(function() {
      $('#menu').find('nav').slideToggle("slow");
});

Answer 2

hide nav - then slideToggle

take a look: http://jsfiddle.net/L33WB/2/

you dont need 2 buttons