CSS about pure css collapsible menu

Question

I wonder is there any good example of pure css only collapsible menu

This is an example of it

http://cssdeck.com/labs/pure-css-tree-menu

The example uses input:checked as the trigger to change children from display:none to display:block

This is example use li:hover to do that

Make pure css collapsible menu triggered by down arrow for mobile browsers

But I want to use li:click as the trigger, is this possible?

Thank you very much for your advice, and very appreciate that I can have a example.

Answer 1

Yes we can!

You can use the :focus pseudo which is activaded on click: http://jsfiddle.net/w5zev/2/ deactivation is more tricky for this technique.

Taken from a google search which led me here: http://quhno.internetstrahlen.de/myopera/csstests/collapsible-paragraph.html#url

Answer 2

You can't do this purely with CSS, :click isn't even a valid css selector attribute(someone please correct me if I'm wrong here). You can only use: active, hover & visited. You CAN however use javascript or jQuery

eg. $('li').click(function(){//Do Something});