Há pouco tempo consegui resolver um problema de colocar uma imagem e quando clicasse nela, ela se tornasse outra, e quando fui passar o código para os outros collapses, me aconteceu isso:
Collapse 3 (Step 3) aberto apenas
Quando clico no Step 2 ou no Step 3, as duas setas (que são imagens) trocam juntas, eu preciso fazer isso em mais 12 steps, só que elas tem que trocar de maneira independente, como posso fazer?
Código Step 2:
<h1 class="collapsed change"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
ng-click="alert_step2()">
<img class="change img-change" src="assets/img/arrow_right.png" style="width: 20px; height: 25px">Step 2 - Acknowledge Your Strengths (highest scores)
</h1>
Código Step 3:
<h1 class="collapsed change"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
ng-click="alert_step3()">
<img class="change img-change" src="assets/img/arrow_right.png" style="width: 20px; height: 25px">Step 3 - Consider The Areas of Your Life that Need Support (lowest scores)
</h1>
Código Javascript:
$('.change').click((e) => {
var img1 = 'assets/img/arrow_right.png';
var img2 = 'assets/img/arrow_down.png';
var element = $('.img-change');
if(element.attr('src') === img1)
{
element.attr('src',img2);
}
else if(element.attr('src') === img2)
{
element.attr('src',img1);
}
});