Image of collapse opening duplicate

Question

Image of collapse opening duplicate

Navigation

#1 by (0 votes)

0

I recently managed to solve a problem of putting an image and when I clicked on it, it became another, and when I went to pass the code to the other collapses, it happened to me:

Collapse closed on

Collapse3(Step3)openonly

When I click on Step 2 or Step 3, the two arrows (which are images) switch together, I need to do this in another 12 steps, but they have to switch independently, how can I do it? >

Step 2 code:

<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>

Step 3 code:

<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>

Javascript code:

$('.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);
    }
});

javascript html css

asked by anonymous 25.10.2018 / 22:57

1 answer

Full Calendar - SCHUDELLER with C # popular table from a combo - jquery / json

score 0 · Accepted Answer

A simple alternative is to add an "index" attribute and change only the one of the same index from where the click came from, here is a functional example:

    $('.change').click(function (){
      var img1 = 'https://i.stack.imgur.com/vIerE.png';
      var img2 = 'https://i.stack.imgur.com/cinkW.png';
      var index = $(this).attr('index');
      var element = $('img[index='+index+']');
      if(element.attr('src') === img1){
        element.attr('src',img2);
      }else if(element.attr('src') === img2){
        element.attr('src',img1);
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1index="1" class="change">Testando Click</h1>
    <img index="1" class="change img-change" src="https://i.stack.imgur.com/vIerE.png"><br><h1index="2" class="change">Testando Click</h1>
    <img index="2" class="change img-change" src="https://i.stack.imgur.com/vIerE.png">