title: Why does my toggleClass event add the class, but not remove it on subsequent clicks?
body: <p>I have a dropdown menu with the initial state of display: none. I'm using a toggleClass event to add a class with display: block, so that when the button is clicked on, the dropdown menu will appear and disappear.</p>
  
  <p>The toggleClass works to add the class, but it won't remove the class when the button is clicked on again. When I look in my 'inspect element' tool in the browser, you can see the class "active" being added, but on subsequent clicks, "active" remains on the div. The classes still flash as though it is recognizing it's supposed to do something on click, but doesn't remove the "active" class.</p>
  
  <p>The relevant code is as follows. You shouldn't need the css as the jquery is what's not working, but I've included it for reference.</p>
  
  <pre><code>    &lt;div class="dropdown"&gt;
        &lt;a class="dropbtn" id="button-services"&gt;&lt;h4 class="button-arrow down-arrow"&gt;Service&lt;/h4&gt;&lt;/a&gt;
        &lt;div class="dropdown-content" id="dropdown-services"&gt;
          &lt;a href="ourwork-advertising.php"&gt;Advertising&lt;/a&gt;
          &lt;a href="ourwork-environmental.php"&gt;Environmental&lt;/a&gt;
          &lt;a href="ourwork-interactive.php"&gt;Interactive&lt;/a&gt;
          &lt;a href="ourwork-logos.php"&gt;Logo&lt;/a&gt;
          &lt;a href="ourwork-packaging.php"&gt;Packaging&lt;/a&gt;
          &lt;a href="ourwork-print.php"&gt;Print&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  .dropdown-content {
     display: none; }
  
  .active{
     display: block; }
  
  
  $('#button-services').click(function () {
      $('#dropdown-services').toggleClass("active");
  
  });
  </code></pre>