Despite many attempts, I haven't been able to make any of the provided answers work in my code.
My setup involves using Bootstrap 3 panels and collapse functionality to display advertisements. In the default view, only the advertisement heading is visible along with a chevron down icon indicating additional information available.
Upon clicking the chevron-down icon, the main panel body with the advertisement text should be revealed. At this point, I'd like the chevron-down icon to change to a chevron-up icon.
The script I'm currently using looks like this:
<script language="JavaScript" type="text/javascript">
$('#Advert').on('show.bs.collapse', function(){
$('#Glyp-Advert').removeclass('glyphicon glyphicon-chevron-down').addclass('glyphicon glyphicon-chevron-up');
});
$('#Advert').on('hide.bs.collapse', function() {
$('#Glyp-Advert').removeclass('glyphicon glyphicon-chevron-up').addclass('glyphicon glyphicon-chevron-down');
});
</script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="Heading-Advert" data-toggle="collapse" data-parent="#accordion" href="#Advert">
Heading
<span class="pull-right"><span id="Glyp-Advert" class="glyphicon glyphicon-chevron-down"></span></span>
</a>
</h4>
</div>
<div id="Advert" class="panel-collapse collapse">
<div class="panel-body">
Advert text<br />
</div>
</div>
</div>
While the above code successfully displays the main advert panel, it doesn't update the icon as intended.
If anyone can provide some guidance, I would greatly appreciate it. Keep in mind that there will be multiple ad placements on the page, so I plan to duplicate the code but modify the IDs to include 'Advert1' or 'Advert2' etc rather than just 'Advert'.