Question

Basically I attempt to have a link slide down a div. This is fairly simple however I require multiple links sliding down their respective divs. I understand I can just name the links and divs unique classes and solve the problem that way, however this naturally also requires a duplication of the jQuery code for each link-div and i have a lot. I therefore need a general script. A simplified version of my situation is as follows:

HTML:

<div>
    <a id=link1>toggle text 1</a>
    <div class=link1>TEXT 1</div>

    <a id=link2>toggle text 2</a>
    <div class=link2>TEXT 2</div>
</div>

My attempt at a jQuery general script for this:

$(document).ready(function() {
    $('[id^=link]').bind('click', function() {
        var $div = $(this).attr('id');
        if($('[class=' + div + ']').is(':visible')) {
            $('[class=' + div + ']').slideUp();
        } else {
            $('[class=' + div + ']').slideDown();
        }

        return false;
    });
});

But as one might expect since I’m writing here it does not work. I am thinking is has to do with the ^= but I can’t figure out how to improve it.

Answer 1

Wouldn’t that work?

$("a").click(function(){
  $(this).next().slideToggle();
});