css3 - CSS: how to select parent's sibling

I have the following HTML in my page.

    

        
        Show Details
    
    
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?

Answer

You cannot do that with CSS but

You can try using jQuery

$("#showCheckbox").click(function(){
    $(this).parent().siblings().show();
});