$(document).ready(function() {
		// scroll page to top on load
		$('html, body').animate({scrollTop:0}, 'slow');
	
		// show only the first section when the page loads
		$(".panel").slice(0,1).show().addClass('activePanel');
		
		// hide all the other sections
		$('.panel').slice(1).hide(); 
		
		// Change the first link in the navigation to an active status
		$(".btn-slide").slice(0,1).addClass('activeLink');
	
		// when you click on a navigation, do something
		$(".btn-slide").click(function(){
				
			// if the nav link clicked is already active then 
			// do something, else do something else
			if($(this).hasClass('activeLink'))
			{
				// if you want, you can add some style/effect to the 
				// link thats already active when pressed. I've left this 
				// blank becuase im happy that nothing happens :)
			} else { 
			  // if the nav link is not active, then slide
			  // up the current active panel (section)
			  $('.activePanel').slideUp('slow');
			  
			  // we then slidedown the panel (section) that has the 
			  // same class name as the navigation ID
			  var contentPanel = $(this).attr('id');
			  $("."+contentPanel).addClass('activePanel').slideDown('slow');
				
			  // then we remove the active link status from its current
			  // place and add .activelink to the nav link clicked
			  $('.activeLink').toggleClass("activeLink");
			  $(this).toggleClass("activeLink");
			  
			  // just to be sure, we scroll the page to the top so that the user
			  // always sees the top headings after clicking a new link
			  $('html, body').animate({scrollTop:0}, 'slow');
			}
		  return false;
		});
	
	});