Twitter Bootstrap Question posted in

How to rotate glyphicon without using javascript? – Twitter bootstrap

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

Tags:

2

Answers


  1. 0

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

    CSS3 transition on click using pure CSS

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search