Expand and collapse text with pure CSS? [duplicate]

StackOverflow https://stackoverflow.com/questions/22565884

  •  18-06-2023
  •  | 
  •  

Вопрос

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> (...)
Это было полезно?

Решение

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/

Другие советы

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 :

click here

but it won't work in older browsers*

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top