Я могу заставить div показывать только по одному за раз, но теперь не могу отключить div

Question

Я хочу отключить все div аннотации класса, а затем включить один конкретный идентификатор после факта. Я делаю это, чтобы убедиться, что одновременно может быть открыта только одна аннотация. Однако, с помощью следующего Javascript, я получил его, так что в данный момент времени может быть открыта только одна аннотация, но теперь невозможно закрыть аннотацию, щелкнув по ней! Любые идеи о том, как я мог бы решить это?

Вот текст, где будут найдены ссылки на аннотации

<div class="text">Here is some text. 
In this text there are links <a href="#" class=annoa onclick="myAnnotation(1)">here</a> 
and there are links <a href="#" class=annoa onclick="myAnnotation(2)">there</a>. 
And there are probably many more! 
They each open their own annotation on the side.</div>

Вот сами аннотации

<div class="annotation" id="an1">I'm the first annotation!</div>
<div class="annotation" id="an2">And I'm another one!</div>

А вот Javascript, который доставляет мне неприятности

function myAnnotation(argument) {

var x = document.getElementById("an" + argument);

  document.getElementById(y).style.display = "none";

  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }

  y = "an" + argument;
}

Answer 1

Итак, в вашем коде есть несколько ошибок:

1. id должно быть уникальным , an1 определено дважды
2. Вы никогда ничего не передаете в функцию myAnnotation, несмотря на то, что ожидаете argument
3. При нажатии <a> ссылка попытается опубликовать и не будет иметь ожидаемой функциональности

Смотрите мой пример того, как начать, вы можете изменить это, чтобы сделать его более динамичным, но, по крайней мере, вы будете на правильном пути.

.annotation, .annotation a {
  display: none;
}

<div class="text">
  Here is some text.
  In this text there are links
  <a href="#" class="link" onclick="myAnnotation('an1')">here</a>
  and there are links
  <a href="#" class="link" onclick="myAnnotation('an2')">there</a>.
  And there are probably many more!
  They each open their own annotation on the side.</div>

<div class="annotation" id="an1">I'm the first annotation!</div>
<div class="annotation" id="an2">And I'm another one!</div>

<script>
function myAnnotation(id) {
   var element = document.getElementById(id);
   if(element.style.display == 'block')
      element.style.display = 'none';
   else
      element.style.display = 'block';
}
</script>