Use same div to toggle different parts of the page

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

id are supposed to be unique

you should use class to do this

[EDIT] updated the jsfiddle to fit Marko Dumic's solution: http://jsfiddle.net/SugvH/

Something like this should do the trick:

$(document).ready(function() {
    var divs = [];
    $(".textBox").each(function(index) {
        divs[index] = this;
    });
    $(".clickMe").each(function(index) {
        $(this).click(function() {
            $(divs[index]).toggle();
        });
    });
});

ID must (as per spec) be unique on the page. You can easily rewrite this to use class attribute:

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

...

Initially, you need to either hide div.textBox when DOM becomes ready, or hide it using CSS.

Then you attach click handlers to a.clickMe:

$(function () {
    $('a.clickMe').click(function () {
        // find first of following DIV siblings 
        // with class "textBox" and toggle it
        $(this).nextAll('div.textBox:first').toggle();
    });
});

However, maybe you don't control the markup but desperately need this done, you can keep your markup as it is and still make it work due to the fact that jQuery uses Sizzle framework to query the DOM which can be forced around the limitation of document.getElementById() (which returns only one element).

E.g. suppose you used id instead of class, if you write $('#clickMe'), you'll get the jQuery collection of only one element (jQuery internally used .getElementById() to find the element), but if you write $('#clickMe'), you get the collection of all elements with the id set to "clickMe". This is because jQuery used document.getElementsByTagName('a') to find all anchors and then filtered-out the elements (by iterating and testing every element) whose attribute value is not "clickMe".

In that case (you used your original markup), this code will work:

$(function () {
    $('a#clickMe').click(function () {
        $(this).nextAll('div#textBox:first').toggle();
    });
});

Again, don't do this unless you absolutely need to!

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

Use something similar to this.

Try appending an index to each pair of a/div's ids (clickme1 and textbox1, etc). Then when an a is clicked, read the id, take the index off the end, and show/hide the textbox with the same index.