Как правильно добавлять классы элементам HTML кода при клике на них?

Question

[Владимир Куракин]

У меня есть карточки услуг (5 штук). При клике на знак "+" рядом со словом "подробнее" каждая карточка должна отдельно разворачиваться или сворачиваться (в зависимости от её текущего положения). 2 последние карточки изначально скрыты, и при нажатии на кнопку "больше предложений" они должны выпадать. Я всё это реализовал с помощью добавления класса "active" элементам при клике на знаки "+" или кнопку "больше предложений". Но код получился больно большой и много действий выполняется одинаковых, это плохо, как вы понимаете. Подскажите, пожалуйста, как это всё можно было бы сократить, не прописывая всё отдельно для каждой карточки.
Вот код - https://codepen.io/Voldemar_Kurakin/pen/GRoWBZY?ed...

Comments

[Алексей Скляров]

добавьте однотипным элементам один общий класс, например js-название-класса и работайте только с этими классами, тогда ваших повторений не будет.

Answer 1

[WapSter]

Вот тебе пример, по аналогии можешь реализовать у себя. Можно еще короче сделать использовав toggle, но я подумал так будет нагляднее.

Comments

[Владимир Куракин]

Извините, я чëт туплю, совсем недавно начал JS изучать. Но почему в вашем примере событие отрабатывает не только вследствие клика по кнопке open, но и вследствие клика по всему блоку item, мне бы хотелось исправить это.

[WapSter]

Владимир Куракин, поправил. Присвоил значение вместо сравнения