Менять цвет инпутов при клике

Здравствуйте Дорогие Профессионалы!
Прошу вашей помощи в моей проблеме, задача состоит в том чтобы менять цвет текста и фона, при раскрытии списка меняется цвет фона и текста, при закрытии меняется обратно в исходное состояние, у меня не получается : 1) чтобы цвет менялся только у того блока который был нажат.
2) При первом клике цвет меняется, а при повторном ничего не происходит) ПРошу пожалуйста помочь, намучался уже с этой проблемой… https://codepen.io/Alfa_main/pen/ZdxOVg

Можно теоретически тем же путем, которым была сделана анимация: использовать комбинацию селектора :checked и ~ вместо +

  1. Я изменил порядок html элементов
  2. Заменил + на ~
  3. Дописал еще одно правило для изменения фона

https://codepen.io/anon/pen/ydKarV


Если бы я решал эту задачу, я бы написал такой js, который добавит класс к расскрытому элементу, и уберет класс когда элемент нужно “схлопнуть”. И уже к этому классу привязывал бы фон и анимацию. Так будет меньше завязки на структуру DOM (селекторы ~ и + чувствительны к этому).

1 Симпатия

Спасибо большое) все очень понятно объяснили, все получилось) буду теперь знать как с таким работать)