CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lehtia
lehtia

Reputation: 23

Triggering a script for multiple similar elements

So let's say I have text:

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

And I have the following annotations which I want to open up:

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

And I use a script like the following:

function myAnnotation() {
  var x = document.getElementById("an1");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

How can I write a script that will grab the ID of my individual links and then open the appropriate annotation?

Upvotes: 1

Views: 76

Answers (3)

Parth Raval
Parth Raval

Reputation: 4433

function myAnnotation(argument) {
  var x = document.getElementById("an" + argument);
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
<div class="text">Here is some text. In this text there are links <a href="#" class="link" id="an1">here</a> and there are links <a href="#" class="link" id="an2">there</a>. And there are probably many more! They each open their own annotation on the side.</div>
<div class="annotation" onclick="myAnnotation(1)">I'm the first annotation!</div>
<div class="annotation" onclick="myAnnotation(2)">And I'm another one!</div>

Note:- You need to create a function and bind that function onClick and pass the parameter there. so you can get dynamic show hide of that function.

Hope this helps !

Upvotes: 1

Herikle Mesquita
Herikle Mesquita

Reputation: 11

First: You can't use the same ID twice (or more)

If a understand your question, you want to show up a element on user action (like a click)

I recommend not toggle display.

function myAnnotation(id) {
  var x = document.getElementById(id);
  x.style.display = "block";
}
<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" style="display:none" id="an1">I'm the first annotation!</div>
<div class="annotation" style="display:none" id="an2">And I'm another one!</div>

Upvotes: 0

Vishal modi
Vishal modi

Reputation: 1720

try this one.

<div class="text">Here is some text. 
In this text there are links <a href="#" class="link" id="an1" data-target="an3">here</a> 
and there are links <a href="#" class="link" id="an2" data-target="an4">there</a>. 
And there are probably many more! 
They each open their own annotation on the side.</div>

<div class="annotation" id="an3" style="display:none">I'm the first annotation!</div>
<div class="annotation" id="an4" style="display:none">And I'm another one!</div>

<script>
$('.link').on('click',function(e){

var id = e.target.attributes.getNamedItem("data-target").value;

 var x = document.getElementById(id);

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

});

</script>

Working Demo

https://jsfiddle.net/0rhnkzuj/1/

Upvotes: 2

Related Questions