Question

Possible Duplicate:
Use same div to toggle different parts of the page

Hello I have the following code:

Javascript/jQuery:

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

Html code printed with a for loop:

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

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

<div>
  <a class="clickMe">Toggle my text</a>
  <br />
  <div class="textBox"> - This text will be toggled 3</div>
</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 classes 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/8/

Thanks

Answer 1

This updated jsFiddle will work. Basically changing the first find into just a regular selector, and then going to the parent of the anchor to find the child divs, and toggling them.

One of many ways to accomplish this task though.