How to rotate glyphicon without using javascript?

Question

I am using twitter bootstrap and I have glyphicon-menu-up. When i click on the icon it collapse and expand the contents.

However when i click on the icon i want to rotate the icon by 180 degree using CSS. I know how to do it using Javascript. But i wanted to do it only using CSS.

Here is the partially working JSFiddle Demo

score 5 · Accepted Answer · answered Jan 26 '17 at 00:15

Your example uses JavaScript anyway to trigger the collapsed state on the div. Either way if you watch the markup from the dev console you can see that a .collapsed class is added to the trigger (in this case your button) when it is clicked.

You can modify your current css with this to get it working:

.collapsed .glyphicon-menu-up {
  transform: rotate(180deg);
}

Example

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

As this similar QA suggests, if you want a CSS only solution, try :active.

CSS3 transition on click using pure CSS

edited May 23 '17 at 11:54

Community

1
1

answered Jan 26 '17 at 00:11

cssidy

395
6
16

How to rotate glyphicon without using javascript?

2 Answers2