아코디언을 축소/확장 할 때 이미지 변경

Question

나는 이것을 수행하는 방법을 알아 내려고 노력해 왔으며, 내가 겪은 모든 대답은 내가하고 싶은 일을하지 않는다. 난 당신이 내가 HTMLfor 아코디언 다음 한 여기 http://162.243.140.112/을 찾을 수 있습니다 내 사이트에 아코디언이 : 그것은 잘 작동

<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> 

을,하지만 난 오른쪽 패널 제목 텍스트 전에 이미지 태그를 가지고있다. 제목 텍스트 앞에있는 이미지를 다른 이미지로 변경하고 싶습니다. 아래쪽 화살표 또는 오른쪽 화살표가 될 것입니다. 내가 찾은 다른 대답에 따라이 JavaScript를 시도했지만 어떤 성공도 찾지 못했습니다. 내가 아코디언 축소 여부에 따라 이미지 변화에 대해 어떻게 갈 것이라고

.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; 
} 

를 필요한 경우

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

    }); 
}); 

여기 내 CSS입니까? 고마워요!

Answer 1

이미지를 다른 이미지로 전환하려면 일반적으로 부드럽게 처리해야합니다. 그러나 display 속성을 부드럽게 변경할 수는 없습니다. inline (<img>의 기본값) 또는 none입니다. 그 사이에는 아무 것도 없습니다.

해결책은 부모 position:relative을주고 이미지 position: absolute (일반적으로 첫 번째 것) 중 하나를 제공하는 것입니다. 이것은 그들이 서로의 위에 앉아있게합니다. 이제는 opacity으로 게임하면됩니다. 1 (보이는 것)에서 0 (완전히 투명)으로 부드럽게 변경할 수 있습니다.

.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; 
} 

참고 : 작업 위의 경우, 당신은 .down-arrow 이미지에서 인라인 style="display: none;" 속성을 제거 할. CSS에 !important을 사용할 수는 있지만 잘못된 방법 일 것입니다.

---

관련없는 및 사이드 참고로, 당신은 주로 jQuery 스크립트를 실행하기 전에 jquery를로드하지를 들어, 콘솔에서 몇 가지 오류가 있습니다.