For() Loops With Mutable Variables

HTML: LINK1

text1 div

LINK2

+ i).click(i, function(e) { $('#text' + e.data).toggle('fast'); returnfalse; }); }

Solution 2:

I think you could do the following:

Add a class "targetLink" to every :

<a id="link1" class="targetLink" href="#">LINK1</a>

Replace the for loop targeting the class itself:

$("a.targetLink").toggle(function() {
    $(this).next("div").slideDown(350);
}, function() {
    $(this).next("div").slideUp(350);
});

Fiddle: http://jsfiddle.net/VinnyFonseca/yxpCA/

EDIT: Extra functionality for closing previously opened div when clicking on another item.

$("a.targetLink").toggle(function() {
    $(".open").slideUp(350);
    $(this).next("div").slideDown(350).addClass("open");
}, function() {
    $(this).next("div").slideUp(350).removeClass("open");
});

Solution 3:

First edit the href attribute attribute to make reference to the corresponding Dom element and some class to identify the anchors.

<a id="link1" href="#text1" class="some-class">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>

<a id="link2" href="#tex2" class="some-class">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>

<a id="link3" href="#tex2" class="some-class">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>

Then modify the javascript

$('.some-class').click(function() {
    $( $(this).attr('href') ).toggle('fast');
});

Share