Q:

SVG click and switch

<svg>
  <a id="T" class="toggle" xlink:href="#0">
  <circle cx="238.1" cy="43.71" r="7.93" fill="#000" />
  </a>
  <a id="Y" class="toggle" xlink:href="#0">
  <circle cx="270.58" cy="119.2" r="6.93" fill="#000"/>
  </a>
  <a id="H" class="toggle" xlink:href="#0">
  <circle cx="203.7" cy="114.11" r="6.93" fill="#000"/>
  </a>

<div id="T_box" class="hide"><h1>........T.......</h1></div>
<div id="Y_box" class="hide"><h1>........Y........</h1></div>
enter code here

Many thanks, @NewToJS
But this still cannot switch.......
I need A to appear, but when clicking B, A disappears, and show B
Array.from(document.getElementsByClassName('toggle')).forEach(a => {
  a.addEventListener('click', function() {
document.getElementById(a.id + '_box').classList.toggle('hide');
  });});

.hide {display: none;}
div {background-color: rgba(0, 0, 0, .2);}

A:

So what you are trying to do is a simple toggle function, you might optimize it and clean it, but at the end it will come down to hide everyone and show the one you need every time.

Array.from(document.getElementsByClassName('toggle')).forEach(a => {
  a.addEventListener('click', function() {
  Array.from(document.getElementsByClassName('toggle')).forEach(i => {
   document.getElementById(i.id + '_box').classList.add('hide');
  });
    document.getElementById(a.id + '_box').classList.remove('hide');
  });
});
.hide {
  display: none;
}
<svg>
      <a id="T" class="toggle" xlink:href="#0">
       <circle cx="238.1" cy="43.71" r="7.93" fill="#000" />
      </a>
      <a id="Y" class="toggle" xlink:href="#0">
       <circle cx="270.58" cy="119.2" r="6.93" fill="#000"/>
      </a>
      <a id="H" class="toggle" xlink:href="#0">
       <circle cx="203.7" cy="114.11" r="6.93" fill="#000"/>
      </a>
<svg>
<h1 id="T_box">A</h1>
<h1 id="Y_box" class="hide">B</h1>
<h1 id="H_box" class="hide">C</h1>

Hope it helps!

