How to toggle CSS transform with jQuery?

Question

I'm trying to rotate an SVG arrow icon when a user clicks on a drop down menu. My code seems to function in Codepen. But when I'm testing it in Chrome, the icon doesn't rotate when you click. I'm using the latest version of Chrome. What's going wrong?

HTML:

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-search" viewBox="0 0 32 32">
      <title>search</title>
      <path class="path1" d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
    </symbol>  
    <symbol id="icon-circle-down" viewBox="0 0 32 32">
      <title>circle-down</title>
      <path class="path1" d="M32 16c0-8.837-7.163-16-16-16s-16 7.163-16 16 7.163 16 16 16 16-7.163 16-16zM3 16c0-7.18 5.82-13 13-13s13 5.82 13 13-5.82 13-13 13-13-5.82-13-13z"></path>
      <path class="path2" d="M9.914 11.086l-2.829 2.829 8.914 8.914 8.914-8.914-2.828-2.828-6.086 6.086z"></path>
    </symbol>
  </defs>
</svg>
<header>
  <div class="dropdown">
    <h1>Bloomberg</h1>
    <svg class="icon icon-circle-down" id="down-arrow"><use xlink:href="#icon-circle-down"></use></svg>
  </div>
  <svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
</header>
<nav>
    <h3 class="nav-category">Homepage</h3>
    <h3 class="nav-category">Bloomberg<span id="markets">Markets</span></h3>
    <ul class="nav-list">
      <li><a href="#">Stocks</a></li>
      <li><a href="#">Currencies</a></li>
      <li><a href="#">Commodities</a></li>
      <li><a href="#">Rates + Bonds</a></li>
      <li><a href="#">Economics</a></li>
      <li><a href="#">Magazine</a></li>
      <li><a href="#">Benchmark</a></li>
      <li><a href="#">Watchlist</a></li>
      <li><a href="#">Economic Calendar</a></li>
    </ul>
    <h3 class="nav-category">Bloomberg<span id="technology">Technology</span></h3>
    <ul class="nav-list">
      <li><a href="#">U.S.</a></li>
      <li><a href="#">Global</a></li>
      <li><a href="#">Startups</a></li>
      <li><a href="#">Cybersecurity</a></li>
      <li><a href="#">Digital Media</a></li>
      <li><a href="#">Bloomberg Technology TV</a></li>
      <li><a href="#">Hello World</a></li>
      <li><a href="#">Studio 1.0</a></li>
    </ul>
 </nav>

CSS:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  background-color: #2800D8;
  color: #fff;
}

.dropdown h1,
.dropdown .icon-circle-down {
  display: inline;
  vertical-align: baseline;
}

.dropdown h1 {
  margin: 0;
}

.dropdown .icon-circle-down {
  margin: 0 0.5em;
  transition: transform .2s ease-out;
}

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

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: #fff;
}

.icon-search {
  width: 1.25em;
  height: 1.25em;
}

nav {
  padding: 0 1em 1em 1em;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  display: none;
}

.nav-category {
  margin: 0;
  padding: 1em 0;
  border-bottom: 1px solid #ccc;
}

#markets {
  color: #FB8E1E;
}

#technology {
  color: #00C88A;
}

.nav-list {
  margin: 0.25em 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.nav-list li {
  width: 50%;
}

.nav-list a {
  display: block;
  padding: 0.5em 0;
  text-decoration: none;
  color: #868686;
  font-weight: bold;
}

jQuery:

$( document ).ready(function() {

  $( ".dropdown" ).click(function() {
    $( "nav" ).slideToggle( "fast" );
    $( "#down-arrow" ).toggleClass( "rotate" );
  });

});

Answer 1

If you're loading your jquery and/or CSS as a separate static files, try reloading the page using Ctrl+F5. This will reload the static files as well instead of using cached files.

Answer 2

It works fine in my browser. If you are not getting it worked out then browser compatibility. So try to code for all standards like

.rotate {
    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform:rotate(180deg); /* Chrome, Safari, Opera */
    transform:rotate(180deg);
}