SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Applying same functionality to separate elements and calling each independently...

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

    Code:
    $('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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    You can place the target id in the anchor's href attribute, as a hash fragment identifier.

    HTML Code:
    <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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •