Show/Hide nested list with css

Show/Hide nested list with css

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?

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.

.
.
.
.