Issue with $(this) and toggle() multiple classes [duplicate]

This question already has answers here: Closed 11 years ago.

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/开发者_Python百科A7Sm4/8/

Thanks

---

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.

---

:) http://jsfiddle.net/A7Sm4/17/

---

See The Demo: Fiddle

Jquery Code:

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

CSS:

.textBox {
    display:none;
}

HTML:

<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>