change the icon of bootstrap panel - php

Question

I make a one faq script in PHP I want to change the icon when I open the panel and close the panel.I have tried these code but not get success.So what is the error in my code?
<div class="col-md-9 col-lg-9 col-sm-12 ">
<?php $v1 = ''; foreach($var as $data){ ?>
<div class="faqHeader" id="<?php echo str_replace(' ','',$data['name']);?>"> <?php echo $data['name'];?> </div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php foreach($data['data'] as $dat){ ?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#col<?php
echo $v1;?>" aria-expanded="true" aria-controls="col<?php
echo $v1;?>">
<span class="glyphicon glyphicon-minus pull-right"></span>
<?php echo $dat['questions'];?>
</a>
</h4>
</div>
<div id="col<?php echo $v1;?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?php echo $dat['answer'];?>
</div>
</div>
</div>
<?php $v1=$v1+1; } ?>
</div>
<?php } ?>
</div>
<script>
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
</script>
Please help me?

Answer 1

Try this
css solution
.panel-heading [data-toggle="collapse"].collapsed:after{
content: "+";
float: right;
}
.panel-heading [data-toggle="collapse"]:after {
content: "-";
float: right;
}
.panel-heading [data-toggle="collapse"].collapsed:after{
content: "+";
float: right;
}
.panel-heading [data-toggle="collapse"]:after {
content: "-";
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<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="#aaa">
aaa
</a>
</h4>
</div>
<div id="aaa" class="panel-collapse collapse in">
<div class="panel-body">
aaa<br>
aaa
</div>
</div>
</div> <!-- .panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#bbb">
bbb
</a>
</h4>
</div>
<div id="bbb" class="panel-collapse collapse">
<div class="panel-body">
bbb<br>
bbb
</div>
</div>
</div>
</div>
</div>
Js solution
$("#accordion, #bs-collapse").on("show.bs.collapse",function(a){
$(a.target).prev('.panel-heading').addClass('active');
});
$("#accordion, #bs-collapse").on('hide.bs.collapse',function(a){
$(a.target).prev('.panel-heading').removeClass('active');
});
$("#accordion, #bs-collapse").on("show.bs.collapse",function(a){
$(a.target).prev('.panel-heading').addClass('active');
});
$("#accordion, #bs-collapse").on('hide.bs.collapse',function(a){
$(a.target).prev('.panel-heading').removeClass('active');
});
.panel-heading a:after {
content: "+";
float: right;
}
.panel-heading.active a:after {
content: "-";
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading active">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#aaa">
aaa
</a>
</h4>
</div>
<div id="aaa" class="panel-collapse collapse in">
<div class="panel-body">
aaa<br>
aaa
</div>
</div>
</div> <!-- .panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#bbb">
bbb
</a>
</h4>
</div>
<div id="bbb" class="panel-collapse collapse">
<div class="panel-body">
bbb<br>
bbb
</div>
</div>
</div>
</div>
</div>