Rotate Font-Awesome Icon 180deg Inside Dropdown Button

Question

I've created some custom button styles and turned them into dropdowns using bootstraps dropdown classes. When I click the buttons, I want the font-awesome icon inside to rotate 180 degrees while the dropdown is open, and to rotate 180 degree the opposite way, back to it's original position, after the button loses active/focus.

The code I've been able to right rotates the icon 180deg, pointing it up. But I can't get it to rotate back down. Also, I have these 2 css classes. I've been leaving them commented out because activating them only adds a weird fade effect. Code is below..

HTML:

<div class="dropdown">
          <a id="dropdown1" class="hlo-btn-round-dropdown dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" tabindex="1">Dropdown <i class="fa fa-chevron-down fa-color icon-rotates" aria-hidden="true"></i></a>
          <ul class="dropdown-menu" aria-labelledby="dropdown1">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>

</div>

CSS:

.icon-rotates {
  -moz-transition: all 1s linear;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}

.icon-rotates.rotate {
  -moz-transition: rotate(180deg);
  -webkit-transition: rotate(180deg);
  transition: rotate(180deg);
}

JS: I've been this with the classes commented out because they make everything weird..

$('.hlo-btn-round-dropdown').click(function(){

  if($(this).css("transform") == 'none') {
    $(this).children().css('transform', 'rotate(180deg)');
  } else {
    $(this).children().css('transform', 'none');
  }

});

Thanks in advance for any answers! jQuery always seems to give me issues or maybe I'm combining too many methods of rotating this idk.

Answer 1

Actually, you can do it with bootstrap Class.You don't have to write extra jquery code.

Did you notice that when the dropdown is open it has an extra class (open)? So when .dropdown has class .open(like .dropdown.open) then you add extra rule to the .icon-rotates (like .dropdown.open .icon-rotates).

 .icon-rotates { -moz-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } .icon-rotates.rotate { -moz-transition: rotate(180deg); -webkit-transition: rotate(180deg); transition: rotate(180deg); } .dropdown.open .icon-rotates { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="dropdown"> <a id="dropdown1" class="hlo-btn-round-dropdown dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" tabindex="1">Dropdown <i class="fa fa-chevron-down fa-color icon-rotates" aria-hidden="true"></i></a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 

Answer 2

Since you are using bootstrap, you can capture the dropdown's hiddden.bs.dropdown event to find out when the dropdown got closed and rotate the icon back to normal position-

$(".dropdown").on("hidden.bs.dropdown", function(){
    $(this).find('.hlo-btn-round-dropdown').children().css('transform', 'none');
});

Here is a working JSFiddle to see this in action - https://jsfiddle.net/schikara/qre4wpcb/1/