Ändern des Bildes, wenn das Akkordeon eingeklappt/erweitert ist

Question

Ich habe versucht herauszufinden, wie das geht, und all die Antworten, die mir begegnen, tun nicht, was ich tun möchte. Ich habe ein Akkordeon auf meiner Website, die Sie hier http://162.243.140.112/ finden kann ich die folgende HTMLfor Harmonika haben:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne2"> 
     <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <img id="whtArrow" src="assets/white_open_arrow.png"> Ch. 7 - The Quick Debt-Free Option </a></h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> Chapter 7, also called “liquidation” or “straight” bankruptcy, allows you to get rid of most debts and start over. It’s a good option for people who are struggling under the weight of unmanageable credit card or other personal debt. During your free consultation ask us if Chapter 7 is the right option for you. </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingTwo2"> 
     <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <img id="whtArrow" src="assets/white_open_arrow.png"> Ch. 13 - The Repayment Option </a></h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body"> If you have a steady income, but are overwhelmed by unmanageable bills and harassing creditors, Chapter 13 bankruptcy may be a good option for you. Once you file for Chapter 13, the collection calls will stop and you’ll be protected against foreclosure and repossession actions. Chapter 13 is one way to take charge of your finances and your future. </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingThree2"> 
     <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <img id="whtArrow" src="assets/white_open_arrow.png"> Ch. 11 - The Small Business Option </a></h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="panel-body"> In today’s tough economic climate, even successful businesses can fall behind on taxes, payroll, vendor and utility expenses. You may think you have to sell your company, but it's not always the case. By filing a Chapter 11 bankruptcy, you can establish a debt repayment plan that will keep your business open and get you on your way to financial freedom. </div> 
    </div> 
    </div> 
</div> 

Es funktioniert gut, aber ich habe ein Image-Tag direkt vor dem Panel Titeltext. Ich möchte in der Lage sein, das Bild vor dem Überschriftentext zu einem anderen Bild zu ändern. Wäre ein nach unten oder nach rechts zeigender Pfeil. Ich habe dieses JavaScript nach einer anderen Antwort ausprobiert, die ich gefunden habe, fand aber keinen Erfolg.

$(document).ready(function() { 
    var $content = $(".panel-body").hide(); 
    $(".panel-title").on("click", function (e) { 
     document.getElementById("whtArrow").src="../assets/blue_phone.png" 

    }); 
}); 

Hier ist meine CSS benötigt, wenn

.panel-wrapper { 
    width: 100%; 
    max-width: 588px; 
    margin: 0 auto; 
    margin-top: 100px; 
} 

.panel{ 
    background-color: transparent; 
    border: none; 
} 

.panel-title img{ 
    margin: 10px 10px 10px 10px; 
} 

h4.panel-title i{ 
    padding:15px; 
    margin: 10px 10px 10px 10px; 
    color: #fff; 
    border-radius: 50%; 
} 
h4.panel-title a{ 
    text-decoration: none; 
    text-align: center; 
    font-size: 18px; 
} 



h4.panel-title{ 
    font-family: 'Lato', sans-serif; 
    line-height: 20px; 
} 

.panel-default > .panel-heading{ 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    background-position: 9px 9px; 
    background-color: #708198; 
    color: #fff; 
    border-radius: 50px; 
    border: solid #fff 3px; 
    margin-bottom: 10px; 
} 

.panel-default >.panel-heading+.panel-collapse>.panel-body { 
    background: #d4d7dd; 
    border-radius: 40px; 
    margin-top: 0px; 
} 

.panel-default1 > .panel-heading1{ 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    background-color: #fff; 
    color: #708198; 
    border-radius: 50px; 
    border: solid #708198 3px; 
    margin-bottom: 10px; 
} 

.panel-default1>.panel-heading1+.panel-collapse>.panel-body { 
    background: #d4d7dd; 
    border-radius: 40px; 
    margin-top: 0px; 
} 

.panel-body{ 
    margin-top: 10px; 
} 



.panel-group .panel { 
    margin-bottom: 0; 
    border-radius: 50px; 
} 

Wie würde ich über das Ändern der Bild gehen basierend darauf, ob das Akkordeon zusammengebrochen ist oder nicht? Danke im Voraus!

Answer 1

Wenn Sie ein Bild mit einem anderen wechseln möchten, möchten Sie es im Allgemeinen reibungslos tun. Aber Sie können die Eigenschaft display nicht reibungslos ändern. Es ist entweder inline (Standard für <img> Elemente) oder none. Da ist nichts dazwischen.

Die Lösung ist, geben Sie die Eltern position:relative und geben Sie eines der Bilder position: absolute (in der Regel die erste). Dadurch sitzen sie übereinander. Alles, was Sie jetzt tun müssen, ist mit ihrer opacity zu spielen, die problemlos von 1 (sichtbar) zu 0 (vollständig transparent) geändert werden kann.

.panel-heading [data-toggle] { 
    position: relative; 
} 
.panel-heading img { 
    transition: opacity .3s cubic-bezier(.4,0,.2,1); 
} 
.panel-heading .open-arrow { 
    position: absolute; 
    opacity: 0; 
} 
.panel-heading [aria-expanded="true"] .open-arrow { 
    opacity: 1; 
} 
.panel-heading .down-arrow { 
    opacity: 1; 
} 
.panel-heading [aria-expanded="true"] .down-arrow { 
    opacity: 0; 
} 

Hinweis: Für die oben zu arbeiten, möchten Sie die Inline-style="display: none;" Attribut aus .down-arrow Bilder entfernen. Ich könnte !important in CSS verwenden, aber es wäre der falsche Weg, um darüber zu gehen.

---

Unrelated und als Nebennote, haben Sie ein paar Fehler in der Konsole, vor allem für nicht jquery Laden vor jQuery Skripte ausgeführt werden.