Dominic Dominic - 30 days ago 8
jQuery Question

Bootstrap 3 collapse change chevron icon on click

I have read all related questions regarding my question and have tried them all to no avail. I can't seem to make my code work, even though I "think" almost every code I wrote was the same with the solutions posted on this site.

Here's the HTML Code:

<div class="press-title">
<p class="text" data-toggle="collapse" data-target="#serviceList">
<span id="servicesButton" data-toggle="tooltip " data-original-title="Click Me!">
<span class="servicedrop glyphicon glyphicon-chevron-down"></span> Services Offered <span class="servicedrop glyphicon glyphicon-chevron-down"></span>
</span>
</p>
</div>
<div id="serviceList" class="collapse">
<div class="row featurette">
...


Here's the JQuery

$('#serviceList').on('shown.bs.collapse'), function() {
$(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}

$('#serviceList').on('hidden.bs.collapse'), function() {
$(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
}


I just want to change the icon from down to up, upon collapsing the element. Then toggle back when the same class is clicked.
I'm really stuck with this one. Thank you in advance!

Answer Source

The problem is with your jQuery code not being correct.

You're closing the event handler function early on this line:

$('#serviceList').on('shown.bs.collapse'), function() {

See that second closing parenthesis? That's closing the 'on' function early. Try changing your jQuery to look like this:

$('#serviceList').on('shown.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  });

$('#serviceList').on('hidden.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  });