Show and hide elements inside SVGs

Question

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 made so far:

<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 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>

It works but the text blocks overlap. What can I do so that there is only one text displayed at a time?

Your help will be appreciated! Thanks for your help!

Answer 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>