title: jquery svg paths: clicking path B check if path A is currently active, if so deactivate A and activate B
body: <p>First of all, thanks for your interest.
  I've got this SVG (country map), and I want the user to click an area of that map so that a div with information about that area pops up and that area (SVG) gets a new color('active'). 
  If the user clicks again on that area, it will get it's previous state and div will hide. So far, so good.</p>
  
  <p>The problem is, if an area is currently 'active' (e.g Area A) and the user clicks another area(e.g Area B), both Areas will be active, and I'd like Area A to deactivate.</p>
  
  <p>So far this is my code:</p>
  
  <pre><code>$(function (){
              $('.distrito').on('click', function(){
                  if ( $(this).hasClass( 'distrito' ) ) {
                      $(this).removeClass('distrito').addClass('distritoIsActive');
                  } else {
                      $(this).removeClass('distritoIsActive').addClass('distrito');
                  }
  /*this will get corresponding div to showup*/
                  $('#legenda' + this.id).toggle(1000);
              });
          });
  </code></pre>
  
  <p>I think I should loop through paths searching for the distritoIsActive class, and I did and created an array with all areas:</p>
  
  <pre><code>let $svgObject = document.getElementById('Layer_1');
  let $myDistrictos = Array.from($svgObject.querySelectorAll("path"));
  </code></pre>
  
  <p>But I'm not able to loop through the array so the app will know if there's a distritoIsActive class and pass it to my function.
  Can someone help me please? 
  Thanks in advance </p>
  
  <p>You can find sample code here: 
  <a href="http://mapa.e-forma.pt" rel="nofollow noreferrer">http://mapa.e-forma.pt/</a></p>