Image of duplicated opening Collapse

Asked

Viewed 43 times

0

Recently I was able 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:

Closed collapse
collapse closed

Collapse 3 (Step 3) open only
collapse open

When I click on Step 2 or Step 3, the two arrows (which are images) exchange together, I need to do this in 12 more Teps, only they have to change independently, as I can do?

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:

<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);
    }
});
  • 1

    Put your code, only with the image does not help you. But probably your two elements have the same ID="" wo of the same stick

  • posted! had forgotten

  • I will post the answer with the corrected code!

1 answer

1


A simple alternative is to add an attribute "index" and change only the one of the same index from which the click came, 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>
<h1 index="1" class="change">Testando Click</h1>
    <img index="1" class="change img-change" src="https://i.stack.imgur.com/vIerE.png">
    <br>
    <h1 index="2" class="change">Testando Click</h1>
    <img index="2" class="change img-change" src="https://i.stack.imgur.com/vIerE.png">

  • It worked, thank you very much Matthew!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.