title: jQuery toggleClass not changing css
body: <p>I am using jQuery to make a dropdown menu. Next to each object to open a dropdown there is a triangle, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/tOJJu.png" alt="enter image description here"><br>
   I have two CSS classes, <code>.caret</code> and <code>.u-caret</code>. Class <code>caret</code> looks like a triangle pointing down, and class <code>u-caret</code> looks like one pointing up. I want the classes to switch when I click on the object.   </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span id="learn"&gt;Open Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.caret {
         border-top:5px solid black;
         border-left:5px solid transparent;
         border-right:5px solid transparent;
  }
  .u-caret{
         border-bottom:5px solid black;
         border-left:5px solid transparent;
         border-right:5px solid transparent;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $('#learn').click(function(){
         $('#learn-dropdown').toggle().css('z-index','200');
         $('#affiliate-content-dropdown').css('z-index','100').slideUp();
         $("#snippet-dropdown").css('z-index','100').slideUp();
         $('#stories-dropdown').css('z-index','100').slideUp();
         $(this).closest('.caret').toggleClass('caret').toggleClass('u-caret');
      });
  </code></pre>