My goal is to disable all annotations within a specific div class and then enable just one particular ID afterwards. This method is meant to ensure that only one annotation can be open at any given time. However, I have encountered an issue with the Javascript code - while it successfully allows for only one annotation to be open simultaneously, there seems to be a problem with closing the annotation by clicking on it. Any suggestions on how I could resolve this issue?
Below is an example text containing links to annotations:
<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!
Each link opens its own annotation on the side.</div>
Here are the actual annotations:
<div class="annotation" id="an1">I'm the first annotation!</div>
<div class="annotation" id="an2">And I'm another one!</div>
And here is the problematic Javascript code:
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;
}