rotate icon bootstrap 3

Question

Have an old project using bootstrap 3 and want to rotate an icon based on if the dropdown is open or not and if another dropdown is open the other icons will rotate back to the closed position. My code now rotates the icon but when I click another dropdown the icon does not return to original state.

$('.dropdown-toggle').click(function() {
  $(this).find('i').toggleClass('rotate');
});

.rotate {
  transform: rotate(180deg);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
  <li id="about-list" class="dropdown">
    <a href="javascript: void(0)" class="dropdown-toggle" data-toggle="dropdown">About<i
            class="fa fa-angle-down nav-angle-down"></i></a>
    <ul class="dropdown-menu" role="menu">
      <li id="about"><a href="#">About</a></li>
      <li id="about-two"><a href="#">About</a></li>
    </ul>
  </li>
  <li id="contact-list">
    <a href="javascript: void(0)" class="dropdown-toggle" data-toggle="dropdown">Contact<i
            class="fa fa-angle-down nav-angle-down"></i></a>
    <ul class="dropdown-menu" role="menu">
      <li id="contact"><a href="#">Contact</a></li>
  </li>
  </ul>
  </li>
</ul>

Answer 1

You need to remove the rotate class on all the other icon elements before toggling it on the right one.

$('.dropdown-toggle').click(function() {
  $('.dropdown-toggle').not(this).find('i').removeClass('rotate');
  $(this).find('i').toggleClass('rotate');
});

.rotate {
  transform: rotate(180deg);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
  <li id="about-list" class="dropdown">
    <a href="javascript: void(0)" class="dropdown-toggle" data-toggle="dropdown">About<i
            class="fa fa-angle-down nav-angle-down"></i></a>
    <ul class="dropdown-menu" role="menu">
      <li id="about"><a href="#">About</a></li>
      <li id="about-two"><a href="#">About</a></li>
    </ul>
  </li>
  <li id="contact-list">
    <a href="javascript: void(0)" class="dropdown-toggle" data-toggle="dropdown">Contact<i
            class="fa fa-angle-down nav-angle-down"></i></a>
    <ul class="dropdown-menu" role="menu">
      <li id="contact"><a href="#">Contact</a></li>
  </li>
  </ul>
  </li>
</ul>

Answer 2

You are using .find() on dropdown element, which toggles only class on i element inside that dropdown. What you may want to do is next:

$('.dropdown-toggle').click(function() {
  $('i.rotate').removeClass('rotate');
  $(this).find('i').toggleClass('rotate');
});

you can also improve that selector to only find it where you need it and not on the whole page.