Making a simple jQuery accordian navigation

At work today I came across the issue of having to make navigation work like an accordian. First I went to the jQuery UI site and looked at the code, added it in and tested it.

Unfortunatley it didn’t work how I wanted. So the next step was to maybe incorporate it into a PHP solution, so when it looks up the data in the table it echos the id into the jQuery code. This still did not work how I wanted becuase the navigation was coded into a function.
I remembered seeing something about how the find() function in jQuery looks for a certain tag, so I coded this.

$(’ul#nav li ul’).hide();

$(’ul#nav li’).click(function(){ // when the li (list item) is clicked it runs the function

$(this).find(this).children(’ul’).slideToggle(500); // it now looks for the child ul within the ul li from above and applies the jQuery slideToggle effect.

});

Very simple, yet very effective!

Tags: accordian, find(), jquery, navigation