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.

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

      function place(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 -->
<g id="city_1" style="display:none; background-color:white;"><text transform="matrix(1 0 0 1 50 30)"><tspan x="0" y="0" fill="#382787" font-family="'Roboto'" font-size="14">Organisation No. 1</tspan><tspan x="0" y="18" font-family="'Roboto'" font-size="14">Responsible Person</tspan><tspan x="0" y="36" font-family="'Roboto'" font-size="14">Zip City</tspan><tspan x="0" y="54" font-family="'Roboto'" font-size="14">Phone No.</tspan><tspan x="0" y="72" font-family="'Roboto'" font-size="14">mail adress</tspan></text>
</g>
<g id="city_2" style="display:none; background-color:white;"><text transform="matrix(1 0 0 1 50 30)"><tspan x="0" y="0" fill="#382787" font-family="'Roboto'" font-size="14">Another Organisation</tspan><tspan x="0" y="18" font-family="'Roboto'" font-size="14">Another Person</tspan><tspan x="0" y="36" font-family="'Roboto'" font-size="14">Another City</tspan><tspan x="0" y="54" font-family="'Roboto'" font-size="14">Phone No.</tspan><tspan x="0" y="72" font-family="'Roboto'" font-size="14">another mail adress</tspan></text>
</g>
<!-- 2 circles as buttons -->
  <circle cx="240" cy="30" r="10"
    style="fill:white; stroke:black;"
    onclick="place('city_1')" />
  <circle cx="240" cy="70" r="10"
    style="fill:green; stroke:black;"
    onclick="place('city_2')" />

</svg>