Forgive my lack of understanding, but I can't seem to figure this out. I have a navigation bar centered both horizontally and vertically with a button inside. When the button is clicked, the nav bar animates to the top of the page with a slight margin remaining. What I'm attempting to accomplish is for the nav bar to return to its original position when the button is clicked again. Despite trying multiple lines of code, I've been unsuccessful in achieving this (which shouldn't be overly complicated). Any assistance would be greatly appreciated.
JavaScript:
$("#btn").click( function(event){
$("#wrapper").animate({
'top': 100
}, 400)
});
CSS:
#wrapper {
position:absolute;
top:50%;
margin-top:-100px;
left:0;
width:100%;
}
#nav {
margin:20px auto;
height:200px;
width:900px;
text-align:center;
background-color:#bca;
border:1px solid green;
}