Skip to content
Advertisement

How to change the color of section of a SVG on click then change back after clicking elsewhere?

I am trying to figure out how to make it so when a user clicks a state on a SVG map of the US (specially this one) the state changes color. In addition when they click on another state or anywhere else, the color of the previous state goes back to the default.

So far I have functions to change the colors, but not sure how to select the specific states themselves.

JavaScript

Advertisement

Answer

You could also use a class that gets toggled on click.
This class (e.g. “.on”) will override the default fill property:

JavaScript
JavaScript
JavaScript

You can toggle highlighting for each path (clicking multiple times).
Click another state will run reset_colors(exclude) to remove previously highlighted state elements.

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement