title: How to toggle CSS transform with jQuery?
body: <p>I'm trying to rotate an SVG arrow icon when a user clicks on a drop down menu. My code seems to function in <a href="http://codepen.io/sclowes14/pen/NbNpbx" rel="nofollow noreferrer">Codepen</a>. 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?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;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"&gt;
    &lt;defs&gt;
      &lt;symbol id="icon-search" viewBox="0 0 32 32"&gt;
        &lt;title&gt;search&lt;/title&gt;
        &lt;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"&gt;&lt;/path&gt;
      &lt;/symbol&gt;  
      &lt;symbol id="icon-circle-down" viewBox="0 0 32 32"&gt;
        &lt;title&gt;circle-down&lt;/title&gt;
        &lt;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"&gt;&lt;/path&gt;
        &lt;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"&gt;&lt;/path&gt;
      &lt;/symbol&gt;
    &lt;/defs&gt;
  &lt;/svg&gt;
  &lt;header&gt;
    &lt;div class="dropdown"&gt;
      &lt;h1&gt;Bloomberg&lt;/h1&gt;
      &lt;svg class="icon icon-circle-down" id="down-arrow"&gt;&lt;use xlink:href="#icon-circle-down"&gt;&lt;/use&gt;&lt;/svg&gt;
    &lt;/div&gt;
    &lt;svg class="icon icon-search"&gt;&lt;use xlink:href="#icon-search"&gt;&lt;/use&gt;&lt;/svg&gt;
  &lt;/header&gt;
  &lt;nav&gt;
      &lt;h3 class="nav-category"&gt;Homepage&lt;/h3&gt;
      &lt;h3 class="nav-category"&gt;Bloomberg&lt;span id="markets"&gt;Markets&lt;/span&gt;&lt;/h3&gt;
      &lt;ul class="nav-list"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Stocks&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Currencies&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Commodities&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Rates + Bonds&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Economics&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Magazine&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Benchmark&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Watchlist&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Economic Calendar&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;h3 class="nav-category"&gt;Bloomberg&lt;span id="technology"&gt;Technology&lt;/span&gt;&lt;/h3&gt;
      &lt;ul class="nav-list"&gt;
        &lt;li&gt;&lt;a href="#"&gt;U.S.&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Global&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Startups&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Cybersecurity&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Digital Media&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Bloomberg Technology TV&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Hello World&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Studio 1.0&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$( document ).ready(function() {
  
    $( ".dropdown" ).click(function() {
      $( "nav" ).slideToggle( "fast" );
      $( "#down-arrow" ).toggleClass( "rotate" );
    });
  
  });
  </code></pre>