title: jQuery ToggleClass on multiple buttons
body: <p>I am trying to toggle visibility of elements with jQuery. The page should load with all elements active. Then, when you click on one of 3 filter buttons, it should hide the elements that don't match. </p>
  
  <p>I can get it to work with addClass and removeClass, but I want to be able to <strong>toggle</strong> the elements on and off when you click each button. This is where it falls apart. With toggleClass, it works on the first click, but when I try to toggle the buttons, the classes get all mixed up. </p>
  
  <p>Here is a <a href="https://jsfiddle.net/lsterling03/3r4ey8ah/" rel="nofollow noreferrer"><strong>working fiddle</strong></a> using removeClass (no toggling): </p>
  
  <pre><code>$(".map-filters .heart").click(function() {
    $('.blue-marker').addClass('d-none');
    $('.green-marker').addClass('d-none');
    $('.red-marker').removeClass('d-none');
  });
  </code></pre>
  
  <p>And here is a <a href="https://jsfiddle.net/lsterling03/3r4ey8ah/3/" rel="nofollow noreferrer"><strong>non-working fiddle</strong></a> where I attempt to toggle the classes –– once you click around a bit, it gets mixed up:</p>
  
  <pre><code>$(".map-filters .heart").click(function() {
    $('.blue-marker').addClass('d-none');
    $('.green-marker').addClass('d-none');
    $('.red-marker').toggleClass('d-none');
  });
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks!</p>