Change an image every click

Question

Good people, I have a problem here. I searched here and on the Internet several times and I did not have an answer that would help me enough, I still have doubts.

I have a website and I have "Collapsible" sectors, so to illustrate, I would like to put an arrow pointed up and when I clicked, pointed down, or whatever. I was able to do this, however, just once, if I click again, the image stays down and does not change any more until I refresh the page. I put the image at the beginning of the text, below I have an example.

In fact, what I really wanted was for her to change when I clicked on any part of the title of the "Collapsible" item, but for now I only got her to change when I clicked on it.

Anyway, that’s two questions in the case. How do I get her to stay in "loop" and every time I click she changes? and How do I get it to click on the title as well??

I put the javascript code together to facilitate my tests, the idea is to move to another file later. I’m a beginner, I have experience with HTML and CSS, but javascript is very basic, I’m remembering a lot of HTML and CSS with this project that has not been moving for a long time and would like a jauda. Thank you very much!

HTML with Javascript code together:

<div class="card">
   <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
	 <h1 class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()">

	 <img id="example" onclick="changeImage()" src="assets/img/arrow_up.png" width="20" height="25">

	 <script>
	 function changeImage(){								 
           element=document.getElementById('example')
              if (element.src.match("out")){
									  
                 element.src="assets/img/arrow_up.png";
              }
              else{
									  
                 element.src="assets/img/arrow_down.png";
              }

              changeImage.repeat(100);
          }
	  </script>
									Step 2 - Acknowledge Your Strengths (highest scores)
							
          </h1>
      </h5>
   </div>
</div>

                      <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                      <h5 class="mb-0">
                        <h1 class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()">


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

Remembering that the script that Mateus Veloso gave me is under that Ollapse

Updated code:

                  <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                      <h5 class="mb-0">


                                <script>
                                $('.change').click((e) => {
                                  var img1 = 'assets/img/arrow_up.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);
                                  }
                                });
                                </script>


                       <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_up.png" style="width: 20px; height: 25px">Step 2 - Acknowledge Your Strengths (highest scores)</h1>

                        </h1>
                      </h5>
                    </div>

Answer 1

I made a functional example, I think it is possible to have an idea of how to do observing it, the example I created is very simple, if you need something more complex can comment below.

$('.change').click((e) => {
  var img1 = 'https://i.stack.imgur.com/vIerE.png';
  var img2 = 'https://i.stack.imgur.com/cinkW.png';
  var element = $('.img-change');
  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 class="change">Testando Click</h1>
<img class="change img-change" src="https://i.stack.imgur.com/vIerE.png">

Example with pure javascript!

var elements = document.getElementsByClassName('change');
elements[0].addEventListener("click", click);
elements[1].addEventListener("click", click);

function click(){
  var img1 = 'https://i.stack.imgur.com/vIerE.png';
  var img2 = 'https://i.stack.imgur.com/cinkW.png';
  var element = document.getElementById('img-change');
  if(element.src === img1){
    element.src = img2;
  }else if(element.src === img2){
    element.src = img1;
  }
}

<h1 class="change">Testando Clique</h1>
<img class="change" id="img-change" src="https://i.stack.imgur.com/vIerE.png">

Answer 2

Apparently you’re using the Collapse Bootstrap together with component card.

If applicable, Collapse shows/hides elements through classes:

• In the element that is hidden classes are added:

  • .collapse to hide the contents;
  • .collapsing during the transition;
  • .collapse.show to display the contents

• In the element that activates Collapse:

  • .collapsed when the element is hidden

That being said, with CSS you already know whether the element is showing or hiding through the presence or absence of the class collapsed on the activator. This way you can use other CSS tricks to add arrows in the .card-header and transform the .card-header integer in the activator of accordeon.

Example:

<div class="card">
    <div class="card-header" id="headingOne" 
        data-toggle="collapse" data-target="#collapseOne">
        <h5>Card title</h5>
    </div>
    <div id="collapseOne" class="collapse show">
        <div class="card-body">Card content</div>
    </div>
</div>

---

Snippet using the pseudo selector :after together with the property content to create the status indicators:

.card-header {
  cursor: pointer;
}

.card-header:after {
  content: '▲';
  position: absolute;
  top: 10px;
  right: 10px;
}

.card-header.collapsed:after {
  content: '▼';
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<div class="container">
    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header bg-primary text-white" id="headingOne" data-toggle="collapse" data-target="#collapseOne">
                <h5 class="mb-0">Collapsible Group Item #1</h5>
            </div>

            <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header collapsed bg-primary text-white" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo">
                <h5 class="mb-0">Collapsible Group Item #2</h5>
            </div>
            <div id="collapseTwo" class="collapse"data-parent="#accordionExample">
                <div class="card-body">
                    3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header collapsed bg-primary text-white" id="headingThree" data-toggle="collapse" data-target="#collapseThree">
                <h5 class="mb-0">Collapsible Group Item #3</h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                <div class="card-body">
                    Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. 
                </div>
            </div>
        </div>
    </div>
</div>