Show And Hide Elements Inside Svgs

I'm trying to set up an interactive map where you can click on circles (for cities) to make some text appear. When you click on another circle another text appears. Here is what I

Solution 1:

You could get all the g elements and hide them, then show the one you want.

<svgwidth="320px"height="210px"xmlns="http://www.w3.org/2000/svg"><title>Javascript und SVG</title><defs><scripttype="text/javascript">
    <![CDATA[
      var id = 'name';

      functionplace(id){
        var gs = document.getElementsByTagName("g");
        for (var i = 0; i < gs.length; i++) {
          gs[i].style.setProperty('display','none');
        }
        var adress_style = document.getElementById(id).style;
        adress_style.setProperty('display','block');
      }
    ]]>
    </script></defs><!-- Text: show and hide --><gid="city_1"style="display:none; background-color:white;"><texttransform="matrix(1 0 0 1 50 30)"><tspanx="0"y="0"fill="#382787"font-family="'Roboto'"font-size="14">Organisation No. 1</tspan><tspanx="0"y="18"font-family="'Roboto'"font-size="14">Responsible Person</tspan><tspanx="0"y="36"font-family="'Roboto'"font-size="14">Zip City</tspan><tspanx="0"y="54"font-family="'Roboto'"font-size="14">Phone No.</tspan><tspanx="0"y="72"font-family="'Roboto'"font-size="14">mail adress</tspan></text></g><gid="city_2"style="display:none; background-color:white;"><texttransform="matrix(1 0 0 1 50 30)"><tspanx="0"y="0"fill="#382787"font-family="'Roboto'"font-size="14">Another Organisation</tspan><tspanx="0"y="18"font-family="'Roboto'"font-size="14">Another Person</tspan><tspanx="0"y="36"font-family="'Roboto'"font-size="14">Another City</tspan><tspanx="0"y="54"font-family="'Roboto'"font-size="14">Phone No.</tspan><tspanx="0"y="72"font-family="'Roboto'"font-size="14">another mail adress</tspan></text></g><!-- 2 circles as buttons --><circlecx="240"cy="30"r="10"style="fill:white; stroke:black;"onclick="place('city_1')" /><circlecx="240"cy="70"r="10"style="fill:green; stroke:black;"onclick="place('city_2')" /></svg>