Hi. I have the following HTML in my page.

HTML Code:
<ul id="detailsList">
    <li>
        <input type="checkbox" id="showCheckbox" />
        <label for="showCheckbox">Show Details</label>
    </li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
</ul>
I am unable to change this HTML. I have hidden all LI's with the exception of the first by using the following CSS

HTML Code:
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

HTML Code:
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 possible?