Можно теоретически тем же путем, которым была сделана анимация: использовать комбинацию селектора :checked
и ~ вместо +
- Я изменил порядок html элементов
- Заменил
+
на~
- Дописал еще одно правило для изменения фона
https://codepen.io/anon/pen/ydKarV
Если бы я решал эту задачу, я бы написал такой js, который добавит класс к расскрытому элементу, и уберет класс когда элемент нужно “схлопнуть”. И уже к этому классу привязывал бы фон и анимацию. Так будет меньше завязки на структуру DOM (селекторы ~ и + чувствительны к этому).