Animating Bootstrap glyphicons

Question

I am using the bootstrap glyphicon-triangle-left and glyphicon-triangle-bottom glyphicons in a bootstrap accordion. When you open up a div it shows the bottom one and when you close it, it shows the left one.

When the icons switch classes it looks a little stupid so I want to create a transition maybe make the icon rotate or fade out/in. But I am not sure how I can do this since I toggle between classes via jQuery like so:

function toggleChevron(e) {
    jQuery(e.target)
        .prev('.panel-heading')
        .find("i.indicator")
        .toggleClass('glyphicon-triangle-bottom glyphicon-triangle-left');
    }

I am not sure how I can do this because it uses the classes from the bootstrap accordion etc.

I've tried doing something like this in my css file but it's not really doing what I want it to do :p

.glyphicon-triangle-bottom{
    opacity: 0;
    transition: opacity 1s;
}

.glyphicon-triangle-left{
    opacity: 1;
    transition: opacity 1s;
}

Anyone had any idea how I can make the icons transition? Many thanks in advance!!

EDIT: I customized this code a bit but this a good representation of what my accordion looks like: http://jsfiddle.net/zessx/r6eaw/12/

Answer 1

Instead of adding a new glyphicon you can rotate the existing left one to bottom.

Like this:

.glyphicon-triangle-left{
    transition: transform .3s ease-in;
}
.glyphicon-triangle-left.rotate-90{
    transform:rotate(90deg);
}

Then toggle the rotate-90 class on click.

Updated the OP Fiddle

Answer 2

See this mashup of the info above. I think it is what you are looking for if you are dealing with a bootstrap accordian.

Working Accordion JSFiddle

updated js to

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find("i.indicator")
        .toggleClass('rotate-180');
}
$('#accordion').on('hide.bs.collapse', toggleChevron);
$('#accordion').on('show.bs.collapse', toggleChevron);

and css to

.glyphicon-chevron-down{
  transition:transform 180ms ease-in;
}
.glyphicon-chevron-down.rotate-180{
  transform: rotate(180deg);
  transition:transform 180ms ease-in;
}
.glyphicon-chevron-up{
  transition:transform 180ms ease-in;
}
.glyphicon-chevron-up.rotate-180{
  transform: rotate(180deg);