Bootstrap 3 collapse change chevron icon on click
Solution 1
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');
});
Solution 2
Pure CSS.
HTML part:
<a data-toggle="collapse" href="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Open/Close collapse
<i class="fa fa-chevron-right pull-right"></i>
<i class="fa fa-chevron-down pull-right"></i>
</a>
The key element here is aria-expanded="false" or "true"
CSS:
a[aria-expanded=true] .fa-chevron-right {
display: none;
}
a[aria-expanded=false] .fa-chevron-down {
display: none;
}
Solution 3
Similar to Bojan's answer, I use this solution.
Change HTML code like this:
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
It's better to use .on
event with respect to .click
. Also by using class selector it can be used as a site wide solution.
$('.chevron_toggleable').on('click', function() {
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
Solution 4
Pure CSS, with even less code + animation.
HTML part:
<a data-toggle="collapse" href="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Open/Close collapse
<i class="fa fa-chevron-right pull-right"></i>
</a>
CSS:
a[aria-expanded=true] .fa-chevron-right {
transition: .3s transform ease-in-out;
transform: rotate(90deg);
}
Solution 5
I'd like to offer an option along the same lines as another solution posted here, but uses a single div with transforms. This would also help make clean use of transitions to animate the icons as well.
`a[aria-expanded=true] .fa-chevron-right { transform: rotate(0deg); }
a[aria-expanded=false] .fa-chevron-right { transform: rotate(90deg); // or whatever direction you need }`
Dominic
Updated on October 28, 2020Comments
-
Dominic about 3 years
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!
-
Dominic about 10 yearsIt worked! Thank you very much! I'm not that used to JQuery yet hence the amateur mistake. Thank you for your time! :)
-
Sasha over 8 yearshello it is worked but instead of icon I see ? icon do you know why
-
gsamaras over 8 yearsAn explanation would be nice!
-
Jim almost 8 yearsI wanted the user to be able to click the entire panel header to expand / collapse, so I used your example but put the click event on the div that contains the panel header. +1 - thanks for a good example.
-
emptywalls almost 8 yearsThis is the best solution, Imho. Ingenious.
-
David J. Davis over 7 yearsBest Solution! Nice Thinking.
-
GunWanderer about 7 yearsI actually like this solution better.
-
Travis Tubbs almost 7 yearsI like this example, but for some reason it misses clicks (so it will expand but not change icon). there are no errors, I am not just what is causing the issue.
-
Freddy Sidauruk over 6 yearscan someone make simple demo about it ?
-
cowbert about 6 yearsNice, but buggy with BS 3 (it doesn't render the chevron-down on page load) (confirmed with codepen edit).
-
Inti about 6 years@cowbert You need to make sure that you add the correct classes to the starting html. In my example it starts collapsed so you need to have
class="collapsed"
as I do ^^ -
cowbert about 6 yearsgot it to work, thanks! I was using the css aria-expanded attribute match hide chevron trick earlier.
-
Inti about 6 yearsGreat - this one even has a bonus little animation between states ;)
-
Tanker about 5 yearsBy far the best solution, tested on FF, GCh, IE9+, Opera, safari, Android Explorer and Gch mobile and Safari in iOS, works great!
-
kord almost 5 yearsThis is a great solution which doesn't involve any additional JS code.
-
John Contarino about 4 yearsSimple, clean and readable is always best ... this gets my vote as the top solution as well!
-
Alex about 4 yearsThis is that elementary simple and perfect it should be part of bootstrap itself. Kudos!!
-
Steve Greene almost 4 yearsNice! Thanks for sharing. My adjustments: start with
aria-expanded=true
,chevron-down
and then dorotate(180deg)
so I get it pointing down with no content. -
Andrew over 3 yearsSee the pure CSS solutions here: stackoverflow.com/a/33496943/5551593
-
Travis about 2 yearsNice and easy implementation!