Wsrtjtyk

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.

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.

So far this is my 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);

            });

        });

I think I should loop through paths searching for the distritoIsActive class, and I did and created an array with all areas:

let $svgObject = document.getElementById('Layer_1');

let $myDistrictos = Array.from($svgObject.querySelectorAll("path"));

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

You can find sample code here:
http://mapa.e-forma.pt/

I added a simple check in your code to get to what you wanted. Have a look below (just the js part)

let $svgObject = document.getElementById('Layer_1');

let $myDistrictos = Array.from($svgObject.querySelectorAll("path"));

let previous = null;



/*let $redClassIsActive = false;*/

console.log($myDistrictos);



$(function (){

        $('.distrito').on('click', function(){



        if(previous === null)

        {

          $(this).removeClass('distrito').addClass('distritoIsActive');

          $('#legenda' + this.id).toggle(1000);

          previous = this;

          return;

        }







        if(previous !== null && previous.id === this.id)

        {

        previous = null;

        $(this).removeClass('distritoIsActive').addClass('distrito');

        $('#legenda' + this.id).toggle(1000);

        }

        else

        {

        $(previous).removeClass('distritoIsActive').addClass('distrito');

        $('#legenda' + previous.id).toggle(1000);

        $(this).removeClass('distrito').addClass('distritoIsActive');

        $('#legenda' + this.id).toggle(1000);

        previous = this;



        }





        });

    }); 

Happy coding