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.

Answer 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);