I’ve used this same technique a few times across a couple projects now. jQuery collapsable navs are all around the internet so if you’ve already seen 3-4+ you’re probably not going to encounter anything new here.

The basic HTML:

The CSS

	ul li ul
{	display: none; }

The Javascript:

$(document).ready(function(){

$('ul li a').click(function() {

	var checkElement = $(this).next();

	if(checkElement.is(':visible')) {
		checkElement.slideUp('normal');
		return false;
	}

	if(!checkElement.is(':visible')) {
		$('ul li ul:visible').slideUp('normal');
		checkElement.slideDown('normal');
		return false;
	}
});

});

Give it a try. Pretty straight forward stuff but here’s a demo anyways: Demo

tags: / / / /

2 comments

  • Chris

    Posted: Oct 23, 2010

    Nice example dude, The demo link seems to be getting a 404 error? i’m keen to see it in use before giveing it a shot myself.

  • darcyclarke

    Posted: Oct 25, 2010

    Should be working now. Thanks for the heads up chris :)

"w3fools.com - because friends don't let friends use w3schools" ~ dan heberden
themify
Learning JavaScript