Applying same functionality to separate elements and calling each independently

JavaScript
1

I’m trying to apply the following functionality to separate elements and leverage this functionality independently from individual calls:

$('body').find('.togged').hide().end().find('a.toggle').click(function() {
    $('body').find('.togged').slideToggle();
        //var elem = $('a.toggle');
        if($(this).hasClass('open')){
            $(this).removeClass('open');
            $(this).addClass('closed');
            $(this).text('[ + ]');
        }else{
            $(this).removeClass('closed');
            $(this).addClass('open');
            $(this).text('[ - ]');
     }
});

What the code above does right now is simply slide a div with the class “togged” (funny class name, I know, but eh–the class names “open” and “closed” allow me to simply do some image stuff with the CSS).

Anyway, this happens whenever a link with the class “toggle” is clicked on. What I would like to do is somehow mold all this to activate ONLY the element(s) somehow indicated or implied to that link. So many something like “<a href=”#" title=“Toggle Element” id=“toggedN”>Click Here</a>" where ‘N’ would be the number appended to the “togged” divs I wish to be toggle-able.

Is there a way to do this? Maybe a better way than what I’ve described here?

2

You can place the target id in the anchor’s href attribute, as a hash fragment identifier.

<a href="#togged1" title="Toggle Element">

Now jQuery can use this.hash to get the “#togged1” string, which can then be used to reference the target area.

3

Hey Paul, I finally got a chance to sit down and test your method. I’m a bit outdated version of jquery (1.2–came with the Drupal install I’m working on), so it didn’t have the hash stuff you mentioned unless I’m blind. But that aside, your idea spurned me to simply get the href of the link that has a specific class name (toggle) and go from there. Worked like a charm! Thanks!