Frank Lucas Frank Lucas - 1 year ago 156
CSS Question

Animating Bootstrap glyphicons

I am using the bootstrap

glyphicons in a bootstrap accordion. When you open up a div it shows the
one and when you close it, it shows the

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) {
.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

opacity: 0;
transition: opacity 1s;

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:

Roy Roy
Answer Source

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

Like this:

    transition: transform .3s ease-in;

Then toggle the rotate-90 class on click.

Updated the OP Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download