Bootstrap 3 accordion - expand collapse icons beside panel title - twitter-bootstrap-3

Question

I want this simple Bootstrap 3 accordion:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
</div>
</div>
</div>
</div>
to have an plus icon when in closed and a minus icon when in hover and active.
My css:
.panel-title a {
background: url('plus.png') no-repeat 100% 50% ;
padding-right:20px;}
.panel-title a:hover{
background: url('minus.png') no-repeat 100% 50% ; }
.panel-title a:active {
background: url('minus.png') no-repeat 100% 50% ; }
So far is working except the active state. Can you help me to make it work?
Thank you

Answer 1

If I recall correctly, the :active state only occurs while the link is actually be clicked. :active has nothing to do with the state of the collapse.
To get this to work, I would change your CSS to something like this:
.panel-title a {
background: url('plus.png') no-repeat 100% 50% ;
padding-right:20px;}
.panel-title a:hover{
background: url('minus.png') no-repeat 100% 50% ; }
.panel-title a.active {
background: url('minus.png') no-repeat 100% 50% ; }
Note that instead of using the :active pseudo, we are actually going to use a class called .active.
Now, just toggle the class on and off via javascript. There are a couple of ways to do this, but the most straight forward would be to attach a listener to the existing a tag, like so:
$('[data-toggle]').on('click', function() {
$(this).toggleClass('active');
});
So in summary, change :active to .active in your css, and add three lines of javascript.
See http://www.bootply.com/130209 for a working example.