Jquery toggle slide using a rel

Question

I'm definitely not a jQuery expert, so having trouble getting this to work properly.

I want to use a link, with rel="X" to slide toggle open/closed a div with class="X".

Default should be closed (or display:none;)

I'd also like to change the background image depending on whether or not the div is open or closed....thinking of maybe switching the link classname??

Trying a whole bunch of jQuery examples and just getting frustrated:(

Here's what I have so far: http://jsfiddle.net/4gn5G/3/

$(document).ready(function () {
    $("a[rel]").click(function () {
        $(".[rel]").toggle("slide");
    });
});

Thanks in advance for the help!!!

Answer 1

As per your fiddle,

you forgot to include jQuery in the page. Once you add that, the script will run fine.

If you want to automate that for all click events with rel, then

$(document).ready(function () {
    $("a[rel]").click(function () {
        var divClass= $(this).attr('rel');
        $("." + divClass).toggle("slide");
    });
});

WORKING DEMO

Answer 2

You need to reference the content of the attribute by which you selected, that you want to use, in your class-selector:

$(document).ready(function () {
    $("a[rel]").click(function () {
        $("." + this.rel).toggle("slide");
    });
});

Or:

$(document).ready(function () {
    $("a[rel]").click(function () {
        $("." + this.getAttribute('rel')).toggle("slide");
    });
});

As you wrote it, you were simply selecting elements that had a class of [rel], which would be none (since [ and ] are invalid characters for id and class).

Answer 3

update to this:

$("a[rel]").click(function () {
    var cls = $(this).attr('rel');
    $("."+cls).toggle("slide");
});