Show/Hide nested list with css

Question

Is there anyway to show and hide onclick a nested list in a vertical navigation sidebar with CSS? if not what would be the best way to do this?

Answer 1

How do you want to hide it? Best is to use simple CSS

ul li ul {
    display: none;
}

ul li:hover ul {
    display: block;
}

You can obviously add some linear transitions/and or fade ins using either CSS or jQuery to avoid the visual jumps.

EDIT

For onClick, use jQuery.

$(".mySelector").click(function() {
    $(this).find("li").find("ul").show();
});

You can replace the show() with fadeIn as well, and I'm assuming by default display: none is there already.

Also, you may wanna use bind if these elements are generated dynamically.