OnClick events have to involve a little bit of JS.
Else, here's a nifty little hack by Chris Coyier - http://css-tricks.com/the-checkbox-hack/
Question
I have a category descrption in HTML as simple as seen below but i want to keep the "childs" hidden("mother" always visible) and show the childs when an user click on the "mother" then hide the childs again when mother is clicked but the childs are not hidden. I don't want to user Java Script, can it be done with pure CSS?
<a href="">MOTHER CATEGORY <br>
<a href="">Child 1 </a><br>
<a href="">Child 2 </a><br>
<a href="">Child 3 </a><br>
<a href="">Child 4 </a><br>
<a href="">Child 5 </a><br>
<a href="">MOTHER CATEGORY 2<br> (...)
La solution
OnClick events have to involve a little bit of JS.
Else, here's a nifty little hack by Chris Coyier - http://css-tricks.com/the-checkbox-hack/
Autres conseils
It can be. Check out the link David shared: Pure CSS collapse/expand div
However, what is keeping you from using JavaScript? I find it to be significantly simpler for expandable and collapsable containers.
If you load the jQuery library, then all you need is:
$('.trigger').click(function() {
$('.container').toggleClass('active');
});
Here you'd add a class of trigger
to the anchor you want to click and a class of container
to your container. Then you can handle all your styles and transitions via pure CSS (by using the active
class).
This minimizes the code you have to write and keeps everything nice and simple and clean.
yes you can do it by checked event in radio button
see the link for more understanding :
but it won't work in older browsers*