Image does not change when you click on it, only in the text

Question

Image does not change when you click on it, only in the text

Navigation

#1 by (0 votes)

0

I have a problem, I have a project with several collapses and to indicate opening and closing of the collapses, I placed an arrow to the right and when clicking on the text, it flips down and the collapse opens, however, own arrow, the collapse opens however the image does not change. I would like her to change together, how could I do it?

Collapse HTML code

        <h1 index="1" class="collapsed change" data-toggle="collapse" data-parent="#accordion" 
        href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()">

        <img index="1" class="change img-change" src="assets/img/arrow_right.png"
        style="width: 20px; height: 25px">Step 2 - Acknowledge Your Strengths (highest scores)</h1>

                        </h1>

JS code for image exchange

    $('.change').click(function (){
    var img1 = 'assets/img/arrow_right.png';
    var img2 = 'assets/img/arrow_down.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);

     }
    });

javascript html

asked by anonymous 29.10.2018 / 15:57

1 answer

I migrated my site from http to https and I lost Facebook comments [closed] Redirect to Home when a page that does not exist in the Wordpress domain is accessed

score 0 · Accepted Answer

It happens by the selector '.change' the event is being triggered twice, when you click on the image it switches to the down arrow and in the sequence it returns to the right one ... Change your selector to 'h1.change' .

$('h1.change').on('click', function() {
  var img1 = 'https://www.thetactilegroup.com/images/arrow_right.png';
  var img2 = 'https://www.thetactilegroup.com/images/arrow_down.svg';
  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="collapsed change" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()">
  <img index="1" class="change img-change" src="https://www.thetactilegroup.com/images/arrow_right.png"style="width: 30px; height: 30px">Step 2 - Acknowledge Your Strengths (highest scores)
</h1>