How can I use nested accordion menus without multi

Question

Here's my base:

http://jsfiddle.net/UnV4Z/

And I want it to be three levels instead of just two. I've got it working here:

http://jsfiddle.net/RnwYQ/13/

But it means that I've got to have one instance per category. Is there a cleaner way of doing this?

Answer 1

Try giving the accordion a class and slightly modifying the code to make it hide siblings based on clicked element.

http://jsfiddle.net/RnwYQ/19/

$(".accordion > li > div").click(function() {

    if (!$(this).next().is(':visible')) {
        $(this).parent().siblings().children("ul").slideUp(300);
    }
    $(this).next().slideToggle(300);
}).parent().filter(":first-child").children("div").click();​