Jquery rel toggle?

Question

Is it possible to toggle (switch) a rel attribute in the same way that classes can be toggled in jquery? http://api.jquery.com/toggleClass/

I am trying to create a button, that when clicked will change(toggle) the rel attribute of another button. Hope that makes sense.

Im pretty new to this and not sure if I have implemented you code right, but its not working. I might be just thinking about this thing wrong.

My idea is to use the animatedcollapse.js plugin (http://www.dynamicdrive.com/dynamici...edcollapse.htm) to animate the accordion. The accordion works the according to the "rel" attribute, either "rel=collapse[selected div]" or "rel=expand[selected div]". To expand or collapse the accordion. The problem with the way it is set up is that when one div collapses another expands at the same time in the background.

http://dl.dropbox.com/u/14080718/Final/UITabs10.html

I am trying to make it so every time a new link is clicked the previous accordion is fully collapsed before it expands a new one. So every time a link is clicked the previous div is fully closed before it opens a new div.

I am thinking that a rel toggle between "rel=collapse[selected div]" and "rel=expand[selected div]" might solve this, but Im not sure. If you have any other ideas, I would love to hear them.

Buttons don't *have* a `rel` attribute (since they don't have an `href` attribute to say what resource the relationship is with). — Quentin, Jan 06 '12 at 07:19
have a look at [data()](http://api.jquery.com/jQuery.data/) for storing "data" in DOM elements — Manse, Jan 06 '12 at 13:37

score 1 · Accepted Answer · answered Jan 06 '12 at 13:36

1

I've just written a jQuery plugin.

Usage: $("selector").toggleAttr("rel", "option1", "option2");

(function($) {
    $.fn.toggleAttr = function(attribute, option1, option2) {
        return this.each(function() {
            var $this = $(this);
            if ($this.attr(attribute) != option1) {
                $this.attr(attribute, option1);
            } else {
                $this.attr(attribute, option2);
            }
        });
    }
})(jQuery);

answered Jan 06 '12 at 13:36

Rob W

341,306
83
791
678

http://dl.dropbox.com/u/14080718/Final/UITabs11.html I dont think that I am using your plugin correctly. What am I doing wrong? Thanks for the help! – Nate Gines Jan 06 '12 at 20:22
A very common mistake, and wrong usage of my plugin: You're executing code before the document has loaded. Use **`$(document).ready(function(){$("#button").toggleAttr("rel", "expand[thumb1]", "collapse[thumb1]")});`**. See also: http://api.jquery.com/ready/ – Rob W Jan 06 '12 at 21:44
Rob- Code is genious! Thanks for the help! Is there a way to turn the function off, so when I click another link on the page the rel goes back to what it was? Basically, I want each div to be entirely closed before another is opened. Does that make sense? http://dl.dropbox.com/u/14080718/Final/UITabs11.html – Nate Gines Jan 09 '12 at 06:59
What do you mean by "Go back to what it was?" Simply invoke `.toggleAttr("rel", "option1", "option2")` again, to revert the change. – Rob W Jan 09 '12 at 10:43
This link might offer some clarity http://stackoverflow.com/questions/1262919/jquery-active-class-assignment I wanted to do this same type of thing, but with changing the rel attribute. I want only the active link to have the rel applied to it. Does that make sense? Sorry my lingo is not so good. This is actually my first time using Jquery. Thanks – Nate Gines Jan 10 '12 at 19:17
Are you looking for this? `$('[rel="expand[thumb1]"]').attr('rel', 'collapse[thumb1]');` This code replaces the `rel` attribute of all elements with `rel="expand[thumb1]"` with `rel="collapse[thumb1]"`. – Rob W Jan 10 '12 at 19:41
How would I go about impletmenting this code. Does it go inline? or as part of the plugin. Sorry, but can seem to get it to work. – Nate Gines Jan 12 '12 at 05:52
Sure thing. I want to modify this plugin to behave in the same way the action on this site works http://dl.dropbox.com/u/14080718/Final/NeedHelp.html – Nate Gines Jan 12 '12 at 17:01
Sure thing! I want to modify this plugin to behave in the same way the animation on this site works http://dl.dropbox.com/u/14080718/Final/NeedHelp.html (one div closes before the next one opens) I would like to use this plugin because it is used on other parts of my site. I was thinking that a good way to get it to work in the same way would be to control the placement of the rel attribute, which is what activates the animatedcollapse.js plugin. Here is what I have so far http://dl.dropbox.com/u/14080718/Final/UITabs11.html Hope this makes sense. Thanks! – Nate Gines Jan 12 '12 at 17:13
So, you want the image to collapse when it's expanded, and expand, when it's collapsed? Replace `rel=expand[...]` and `rel=collapse[...]` with `rel=toggle[...]`... As [documented in the source code](http://dl.dropbox.com/u/14080718/Final/js/animatedcollapse.js) of your plugin: http://jsfiddle.net/eX58P/ – Rob W Jan 12 '12 at 17:27
I actually want it to behave like this site dl.dropbox.com/u/14080718/Final/NeedHelp.html I would like each time a link is clicked for the page to animate up to hide the previous div and then when another link is clicked for it animate down to show the div. Right now the page doesnt animate up and down, it shakes when you click the links because the plugin is trying to animate, but for some reason it doesnt let it. Sorry, I dont think I am doing a great job describing it. – Nate Gines Jan 12 '12 at 23:48
Why do you want to recreate the effect using another plugin, if you can also copy-paste the solution from `NeedHelp.html`, with some adjustments? If all you want is the same effect, just edit the code at `NeedHelp.html`, and implement it at `UITabs11.html`. – Rob W Jan 13 '12 at 10:06
I am probably going to have to do that. I was trying to just use one plugin for the whole thing. The animated collapse is set up better for use on other parts of my site. But I think I can probably run two sets of code and it would work. – Nate Gines Jan 13 '12 at 17:22

score 0 · Answer 2 · edited Jan 06 '12 at 08:42

0

//global flag to check condition
var flag = true;

$('#yourelement').click(function(){
           if(flag == true){
                flag = false;
                $('#yourotherelement').attr('rel', newValue);         
           }else{
                flag = true;
                $('#yourotherelement').attr('rel', oldValue);
          }
});

edited Jan 06 '12 at 08:42

mplungjan

169,008
28
173
236

answered Jan 06 '12 at 07:23

Ryan

2,755
16
30

A global flag? Eugh. Now you're storing the same information in two places, and one of them prevents the code from being easily reused. – Quentin Jan 06 '12 at 10:27

Yaseen · Answer 3 · 2012-01-06T13:41:21.180

0

You probably want this,

$(document).ready(function(){
  $(".buttonToggle").click(function(){
    var relAttribute = $(".buttonYouWanttotogglerelattr").attr("rel"); 
  //gets current rel
    if(relAttribute == "value1"){
     $(".buttonYouWanttotoggleRelattr").attr("rel","value2"); 
     //if its value1 change it to value2
     }
    else
     {
     $(".buttonYouWanttotoggleRelattr").attr("rel","value2");
     }
  });
});

edited Jan 06 '12 at 13:41

answered Jan 06 '12 at 07:28

Yaseen

1,348
2
16
31

1

`if(var = "value1"){`? ya what?! – Quentin Jan 06 '12 at 10:26
Ah, this answer has been edited. So… `if(relAttribute = "value1"){`? ya what?! – Quentin Jan 06 '12 at 13:30
1

@Mohammed, you have to use `==` or `===`, to test whether the variables are equal. Currently, you're assigning `"value1"` to `relAttribute`. – Rob W Jan 06 '12 at 13:30

Jquery rel toggle?

3 Answers3