Question

Hello I have the following code:

Javascript/jQuery:

$(document).ready(function() {
 $(".clickMe").click(function() {
  $(".textBox").toggle();
 });
});

Html code printed with a for loop:

<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>

<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>

<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 3</div>

I would like to be able:

1. When the page loads I want the to be hidden and toggle on click.
2. Using the same ids for <a class="clickMe"> and <div class="textBox"> to be able to toggle or hide the correct/equivalent <div> element.

jsFiddle code:

http://jsfiddle.net/A7Sm4/3/

Thanks

• Edit 1: Class instead of Id
• Edit 2: Fixed jsfiddle link

Answer 1

$(document).ready(function() {
$("a").click(function() {
  $(this).parent().find("div").toggle();
});
});

Use something similar to this.