Studento919 Studento919 - 2 months ago 21
CSS Question

Only change image src for container that is collapsed

I have two listeners on when the containers open or close.

But all images change when a container opens, and all images change when a container closes at the same time.

I only want the the container that was opened to changed to minus and the rest remain as plus images and vice versa.

I am using bootstrap for the collapsible container functionality.

Below is what I currently have:



$('#accordion').on('shown.bs.collapse', function(e) {
$(this).find(".panel-icon").attr('src', 'https://s22.postimg.org/hkrauaofx/Mathematic_Minus2.png');
});

$('#accordion').on('hidden.bs.collapse', function(e) {
$(this).find(".panel-icon").attr('src', 'https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png');
});

.container {
width: 75%;
}
.head {
background: #D9DBDE;
}
.panel-heading {
background-color: #D9DBDE;
padding: 20px;
margin-bottom: 10px;
border-radius: 0;
}
.panel-title {
font-size: 21px;
display: block;
width: 100%;
color: #4F5858;
line-height: 1.3;
font-weight: normal;
}
.panel-icon {
width: 30px;
padding: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
<form action="/update" id="formwrite">
<div class="panel-group secondary-bridge container" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title va-middle">Tab 1
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
</h4>
</div>
<div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-default">
<div class="panel-heading">
Tab 1
</div>
<div class="panel-body row fieldpos">
<fieldset class="form-group textwide">
<label for="vmrecord">Email</label>
<input type="email" class="form-control" id="vmrecord" placeholder="Enter Email" required>
</fieldset>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title va-middle">Tab 2
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo">
</h4>
</div>
<div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-default">
<div class="panel-heading">
Tab 2
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title va-middle">Tab 3
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeThree" aria-expanded="true" aria-controls="collaspeThree">
</h4>
</div>
<div id="collaspeThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-default">
<div class="panel-heading">
Tab 3
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">Tab 4
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-default">
<div class="panel-heading">
Tab 4
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">Tab 5
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-default">
<div class="panel-heading">
Tab 5
</div>
</div>
</div>
</div>
</div>
</form>
</body>





And here is the JSFiddle

Any suggestions?

Answer

Try this, I have used .panel instead of #accordion, with #accordion (this).find will find all img in it.

$('.panel').on('shown.bs.collapse', function(e) {
  $(this).find(".panel-icon").attr('src', 'https://s22.postimg.org/hkrauaofx/Mathematic_Minus2.png');
});

$('.panel').on('hidden.bs.collapse', function(e) {
  $(this).find(".panel-icon.collapsed").attr('src', 'https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png');
});

https://jsfiddle.net/04uL9tqh/24/