CSS-селектор для div после div, содержащий отмеченный флажок

Question

Я ищу чистый способ CSS сделать флажок скрыть / показать содержимое <div class="chapter"> блок:

<div>
    <input id="_1" type="checkbox">
    <h2>
    <label for="_1">Collapse 1</label>
    </h2>
</div>
<div class="chapter">
    Content 1
</div>

<div>
    <input id="_2" type="checkbox">
    <h2>
    <label for="_2">Collapse 2</label>
    </h2>
</div>
<div class="chapter">
    Content 2
</div>

Моя текущая попытка (tl; dr: прокрутите вниз):

/* Niceties */

*:focus{
    outline: none;
}

label {
    cursor : pointer;
    display: block;      
}


/* Checkboxes are hidden, and replaced with a right/down pointing 
   arrow, depending on selection state. Note that I want this 
   arrow to be placed *before* the h2 */

div > input { 
    display           : inline-block; 
    -webkit-appearance: none; 
    -o-appearance     : none; 
    -moz-appearance   : none;  
}

div > input:before { 
    content: "\25b6  ";     /* right-pointing arrow */ 
    display: inline-block;      
}

div > input:checked:before { 
    content: "\25bc  ";     /* down-pointing arrow */
    display: inline-block; 
}

/* And here's the problem: how to make the checkbox affect the div 
   after the checkbox' parent div? */

/* (show) */
input + h2 + div.chapter {   /* this obviously does not work */
    display: none; 
}

/* (hide) */
(div + input:checked) + div.chapter {  
    /* this selector is pseudo-code of what I really need, but 
       how to accomplish this kind of grouping? */
    display: block;  
}

Принятый ответ на этот вопрос изменяет структуру HTML, помещая элемент, который должен быть затронут, в <input>окружает <div>, Я хотел бы мой <div> структура, чтобы остаться нетронутой, потому что мне нужно, чтобы стилизовать <h2>,

Обратите внимание, что я явно не использовал теги jquery или javascript, мне интересно, есть ли здесь чистое решение CSS, которого я не вижу (или даже не знаю).