Swap image with click on bootstrap accordian link

Question

I am trying to swap images based on which accordion link you click. For example if you click the first accordion link it will open up that accordion and change the image above the accordion to the image that's in that section. If you click the next on it will open up the accordion for that link and change it to the image in that section. Can someone help me out or point me in the right direction. Thanks for all your help.

Here is my code:

 <img src="link to image I want changed" />
 <div id="accordion" style="margin-top: 10px">
 <div class="card" style="border-color: #FF9106; border-width: 1px;">
 <div class="card-header" style="background-color: #ffffff;" 
  id="headingOne">
  <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" >
       <h5 class="mb-0">first Link</h5>
    </button>
  </h5>
</div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body" style="margin: 10px; background-color:#FDFDFD">
    <p><img src="assets/img/station2/Timeline_MTP.svg" /></p>
     <ul>
                                        <li><span>....</span></li>
                                        <li><span>....</span></li>
                                        <li><span>....</span></li>
                                    </ul>

  </div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingTwo">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
     2nd Link
    </button>
  </h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
  <div class="card-body" style="margin: 10px">
   <p><img src="assets/img/station2/Timeline_LTP.svg" /></p>
    <ul>
                                        <li><span>....</span></li>
                                        <li><span>....</span></li>
                                    </ul>

  </div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingThree">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      3rd Link
    </button>
  </h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
  <div class="card-body" style="margin: 10px">
                             <p><img src="assets/img/station2/Timeline_FULL.svg" /></p>
                              <ul>
                                        <li><span>....</span></li>
                                        <li><span>....</span></li>
                                    </ul>

                                                    </div>
  </div>
</div>
</div>

Answer 1

Thanks to someone who pointed me in the right direction and then deleted it (not sure why), I have found a solution. I used javascript to replace the images and added it to the button on the accordion.

<script>
    function Showpic1() 
{
    document.getElementById("image").src = "assets/img/station2/Timeline_MTP.svg";  
}

function Showpic2() 
{
    document.getElementById("image").src = "assets/img/station2/Timeline_LTP.svg"; 
}
function Showpic3() 
{
    document.getElementById("image").src = "assets/img/station2/Timeline_FULL.svg"; 
}
</script>

HTML

Medium-Term Projections (up to 5 years)

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body" style="margin: 10px; background-color:#FDFDFD">
     <ul>
                                        <li><span>...</span></li>
                                    </ul>

  </div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingTwo">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"  onclick="Showpic2()">
      Long-term macroeconomic projections (beyond 5 years)
    </button>
  </h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
  <div class="card-body" style="margin: 10px">
    <ul>
                                        <li><span>...</span></li>
                                    </ul>

  </div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingThree">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"  onclick="Showpic3()">
      Long-term growth projections (beyond 5 years) need to consider the stage of development.
    </button>
  </h5>
 </div>
 <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
  <div class="card-body" style="margin: 10px">
                              <ul>
                                        <li><span>...</span></li>
                                    </ul>

                                                    </div>
  </div>
 </div>
 </div>