How to: Expandible nested list?

Question

Hi... great community :)

I have category list which have nested child category list, which is hidden. My problem is that parent categories have link to page, and I want to add "+" sign next to them so if You click on "+" child list will be expanded, "+" will be replaced with "-" (for closing), and if You click on category name, You will be taken to that page. So i need chaning + and - along with cclick option, if you could understood me, my english sucks :)

Here is the code that I'm trying to create:

$(document).ready(function() {
 $("ul#sitemap li ul").hide();
 $('ul#sitemap li:has(> ul)').prepend(' <a href="javascript:;" class="open">+</a>');
 $('ul#sitemap li a.open').click(function () {
   $(this).html('-').removeClass('open').addClass('clicked'); 
   $("ul li>ul:visible").hide("slow");
   $(this).parent('li').find('ul').slideDown();
 });

 $('sitemap li a.clicked').click(function () {
   $(this).html('+').removeClass('clicked').addClass('open'); 
   $(this).parent('li').find('ul').slideUp();
 });
});

Answer 1

Use

live for the newly created anchor tags and this should work

$('ul#sitemap li a.open').live ( "click" , function () {

and

$('sitemap li a.clicked').live ( "click" , function () {