I have an accordion on my site. I have the following HTML for the accordion:
<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>
It works fine, but I have an image tag right before the panel title text. I want to be able to change the image before the heading text to a different image. Would be a down or right arrow. I tried this JavaScript according to another answer I found but did not find any success.
$(document).ready(function () {
var $content = $(".panel-body").hide();
$(".panel-title").on("click", function (e) {
document.getElementById("whtArrow").src="../assets/blue_phone.png"
});
});
Here's my CSS:
.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;
}
How would I go about changing the image based on whether the accordion is collapsed or not?
When you want to switch an image with another, you generally want to do it smoothly. But you can't change the display property smoothly. It's either inline (default for <img> elements) or none. There's nothing in between.
The solution is to give the parent position:relative and give one of the images position: absolute (typically the first one). This will make them sit on top of each other. Now all you need to do is play with their opacity, which can be smoothly changed from 1 (visible) to 0 (completely transparent).
.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;
}
Note: For the above to work, you want to remove the inline style="display: none;" attribute from .down-arrow images. I could use !important in CSS, but it would be the wrong way to go about it.
Unrelated and as a side-note, you have a few errors in your console, mainly for not loading jquery before running jQuery scripts.