Bootstrap 3 collapse change chevron icon on click

102,254

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 }`

Share:
102,254
Dominic
Author by

Dominic

Updated on October 28, 2020

Comments

  • Dominic
    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
    Dominic about 10 years
    It worked! Thank you very much! I'm not that used to JQuery yet hence the amateur mistake. Thank you for your time! :)
  • Sasha
    Sasha over 8 years
    hello it is worked but instead of icon I see ? icon do you know why
  • gsamaras
    gsamaras over 8 years
    An explanation would be nice!
  • Jim
    Jim almost 8 years
    I 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
    emptywalls almost 8 years
    This is the best solution, Imho. Ingenious.
  • David J. Davis
    David J. Davis over 7 years
    Best Solution! Nice Thinking.
  • GunWanderer
    GunWanderer about 7 years
    I actually like this solution better.
  • Travis Tubbs
    Travis Tubbs almost 7 years
    I 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
    Freddy Sidauruk over 6 years
    can someone make simple demo about it ?
  • cowbert
    cowbert about 6 years
    Nice, but buggy with BS 3 (it doesn't render the chevron-down on page load) (confirmed with codepen edit).
  • Inti
    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
    cowbert about 6 years
    got it to work, thanks! I was using the css aria-expanded attribute match hide chevron trick earlier.
  • Inti
    Inti about 6 years
    Great - this one even has a bonus little animation between states ;)
  • Tanker
    Tanker about 5 years
    By far the best solution, tested on FF, GCh, IE9+, Opera, safari, Android Explorer and Gch mobile and Safari in iOS, works great!
  • kord
    kord almost 5 years
    This is a great solution which doesn't involve any additional JS code.
  • John Contarino
    John Contarino about 4 years
    Simple, clean and readable is always best ... this gets my vote as the top solution as well!
  • Alex
    Alex about 4 years
    This is that elementary simple and perfect it should be part of bootstrap itself. Kudos!!
  • Steve Greene
    Steve Greene almost 4 years
    Nice! Thanks for sharing. My adjustments: start with aria-expanded=true, chevron-down and then do rotate(180deg) so I get it pointing down with no content.
  • Andrew
    Andrew over 3 years
    See the pure CSS solutions here: stackoverflow.com/a/33496943/5551593
  • Travis
    Travis about 2 years
    Nice and easy implementation!