categories: development / tutorials /
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:
- item 1
- link 2
- link 3
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
