I have the following HTML in my page.
- content ...
- content ...
- content ...
- content ...
- content ...
I am unable to change this HTML. I have hidden all LI's with the exception of the first by using the following CSS
ul#detailsList li:nth-child(1n+2) {
display:none;
}
So far so good. What I want to do now is to show those hidden LI's when the the checkbox is ticked, using pure CSS. My best attempt so far is
ul#detailsList li input#showCheckbox:checked + li {
display:block;
}
Obviously this doesn't work, as the + li will only select LI's immediately after the checkbox (i.e. siblings), not siblings of the parent.
Is this even possible?
No comments:
Post a Comment