jquery top drawer with tabs navigation

jquery top drawer with tabs navigation

I'm trying to create horizontal navigation fixed to the top of the page
that uses a drawer like effect to drop down some content when clicking
each link. I'm using jquery from a lynda training course to create the
tabbed like effect to show different content when clicking between links.
I'm having a problem adding in an effect I want. When a user clicks a link
the drawer slides down and the content with it, instead of just revealing
the content. However, I can't seem to get the effect to work properly when
you click #close and have the content and drawer slide back up. The
closing animation is supposed to animate the height of #drawer-conent to
0px and also the top-margin to a number equal to the height of the current
panel being displayed. Both animations together give the effect of the
drawer and its content sliding back up.
Here is the code I'm using:
var panelWidth = 0;
$(document).ready(function(){
window.panelWidth = $('#drawer').width();
$('#drawer-content .panel').each(function(index){
$(this).css({'width':
window.panelWidth+'px','left':(index*window.panelWidth)+'px'});
$('#drawer .panels').css('width',(index+1)*window.panelWidth+'px');
});
$('nav ul li').each(function(){
$(this).on('click', function(){
changePanels( $(this).index() );
collapsePanel( $(this).index() );
});
});
// Animate each panel to slide down as the drawer slides down.
$("nav ul li").click(function(){
$('.panel').animate({marginTop:0+'px'},300);
});
// prevent the close and nav links from loading the #
$("nav ul li a, #drawer-toggle a").click(function( event ) {
event.preventDefault();
});
});
function changePanels(newIndex){
var newPanelPosition = (window.panelWidth*newIndex)* -1;
var newPanelHeight = $('#drawer
.panel:nth-child('+(newIndex+1)+')').find('.panel-content').height()
+ 15;
$('#drawer .panels').animate({left:newPanelPosition},0)
$('#drawer #drawer-content').animate({height:newPanelHeight},300);
if ( $("#drawer-content").css("height") == 0+'px' ) {
$('#drawer .panel').css('margin-top', -newPanelHeight);
return false;
}
$('nav ul li').removeClass('selected');
$('nav ul li:nth-child('+(newIndex+1)+')').addClass('selected');
}
function collapsePanel(newIndex){
var anotherPanelHeight = $('#drawer
.panel:nth-child('+(newIndex+1)+')').find('.panel-content').height() +
15;
$("#close").on('click', function(){
$("#drawer-content").animate({height:0 +'px'},300);
$("#drawer .panel").animate({marginTop:-anotherPanelHeight},300)
});
}