sliding div

by lemon kazi

HTML

<div id="categoryNav" style="border:outset #000 2px; width:200px;">
NavLine1 <br />
NavLine2
</div>

<br /><a id="showHideLink" href="#">Show/Hide</a>

<div id="mainNav">#MainNav content</div>

CSS

.catMenuOpen {background-color:#0F0}

JavaScript

$(document).ready(function(){
    $("#categoryNav").hide();
    $('#showHideLink').click(function(){
		
		if (!$("#categoryNav").is(":visible"))
			$('#showHideLink, #mainNav').addClass("catMenuOpen");
		
        $("#categoryNav").slideToggle(function() { 
			if (!$("#categoryNav").is(":visible"))
				$('#showHideLink, #mainNav').removeClass("catMenuOpen");
        });
    });
});