CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-railsjquery-ui
Immo
Immo

Reputation: 601

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

Upvotes: 0

Views: 1501

Answers (5)

JMax
JMax

Reputation: 26591

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/

Upvotes: 2

Marko Dumic
Marko Dumic

Reputation: 9888

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!

Upvotes: 1

glarkou
glarkou

Reputation: 7101

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

Use something similar to this.

Upvotes: 0

alnorth29
alnorth29

Reputation: 3602

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();
        });
    });
});

Upvotes: 1

yoozer8
yoozer8

Reputation: 7489

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.

Upvotes: 0

Related Questions