2

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>
&nbsp;&nbsp;<a href="">Child 1 </a><br>
&nbsp;&nbsp;<a href="">Child 2 </a><br>
&nbsp;&nbsp;<a href="">Child 3 </a><br>
&nbsp;&nbsp;<a href="">Child 4 </a><br>
&nbsp;&nbsp;<a href="">Child 5 </a><br>

<a href="">MOTHER CATEGORY 2<br> (...)
user3325861
  • 59
  • 1
  • 1
  • 6
  • 1
    I dont think clicks can be handled by pure CSS – Zword Mar 21 '14 at 17:47
  • Voting to reopen, trusting you to say it's not a duplicate, but you should perhaps add a line or two more details about why the other one is not duplicate to get this reopened faster. – hyde Mar 21 '14 at 19:37

3 Answers3

1

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/

1

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.

Community
  • 1
  • 1
seancdavis
  • 2,739
  • 2
  • 26
  • 36
0

yes you can do it by checked event in radio button 

see the link for more understanding :

click here

but it won't work in older browsers*

Suraj Rawat
  • 3,685
  • 22
  • 33