Как добавить цвет кнопки по клику?

Question

[Артур Левенсон]

Подскажите, как реализовать изменение цвета по клику на div btn?
Цвет кнопки должен меняться, а иконка должна оставаться на месте
при открытие текста, кнопка должна быть активной
Ссылка на пример: https://codepen.io/kiskiskit/pen/oNXdLxV

Answer 1

[Lord_Dantes]

Вот, вам нужно было немного переделать структуру и при клике добавлять класс, еще поправил момент с открытием всех вкладок одновременно.

Код

HTML:

<div class="block-list">
  <div class="block">
    <div class="btn"></div>
    <h2 class="title">Заголовок</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste, enim quisquam debitis odio cumque magni maxime totam saepe ad at quas deserunt quod, sapiente nihil cupiditate architecto odit ab officia.</p>
  </div>
  <div class="block">
    <div class="btn"></div>
    <h2 class="title">Заголовок</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste, enim quisquam debitis odio cumque magni maxime totam saepe ad at quas deserunt quod, sapiente nihil cupiditate architecto odit ab officia.</p>
  </div>
  <div class="block">
    <div class="btn"></div>
    <h2 class="title">Заголовок</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste, enim quisquam debitis odio cumque magni maxime totam saepe ad at quas deserunt quod, sapiente nihil cupiditate architecto odit ab officia.</p>
  </div>
</div>

CSS:

.block-list {
  display: flex; 
  flex-wrap: wrap; 
 
}

.block {
  background: red;
  width: 200px;
  height: 300px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.title {
  background: #eee;
  height: 40px;
}


.btn {
  width: 20px;
  height: 20px; 
  background: green;
  position: absolute;
  margin-left: 160px;
  margin-top: 30px;
  background: url(https://i7.pngflow.com/pngimage/969/593/png-computer-icons-graphics-email-writing-icon-design-website-icon-angle-desktop-wallpaper-computer-icons-email-clipart.png) no-repeat center;
 background-size: 50px;
}
.active-btn{
  background:green;
}

JS(jQuery):

$('.btn').click(function(){
    $(this).parent().find("p").slideToggle();
    $(this).parent().find(".title").toggleClass('active-btn');
  });

Comments

[Артур Левенсон]

Спасибо большое за помощь!

[Артур Левенсон]

ваш ответ помог разобраться, спасибо. но у меня возникли сложности. как добиться того, чтобы кнопка с классом btn изменяла цвет при её активном состояние и отображала иконку, пробовал выставлять z-index, но не помогает(. сейчас она изменяет цвет только при неактивном состояние.

https://codepen.io/kiskiskit/pen/GRogRJw

[Lord_Dantes]

Артур Левенсон, чтобы изменить цвет иконки вам нужен другой формат. Сейчас же у вас привязанность к png картинке. Найдите или переведите иконку в SVG формат.

[Артур Левенсон]

s l a v e, вас понял, спасибо