[jQuery] Re: Help please with toggling a class

[Karl Swedberg]

Hi Zac,

You just need to add one line -- $(this).toggleClass('yourClass'); --  
where "yourClass" is the class you want to toggle on and off.

You should also add return false after that line so that the default  
click behavior doesn't occur.

jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

$(function() {
    $('a.aboutlink').click(function() {
      $('.aboutbox').fadeToggle();
      $(this).toggleClass('yourClass');
      return false;
    });
});



--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Feb 27, 2009, at 9:09 PM, zac wrote:


Hi.. I am trying to have it so my navigation toggle hidden boxes on
the site.  I want it so the link toggles the box on and off, as well
as having the link itself have a class toggled on and off (a
background color).

So far I have the toggling box...

jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
  $(function() {
                $('a.aboutlink').click(function() {
                        $('.aboutbox').fadeToggle();
                        });
  });


.aboutbox {
background: #151515;
padding: 50px;
border: 2px solid #000;
display: none;
}

But I am not sure how I would also have the link itself (.aboutlink)
have a class toggled on and off. simultaneously.  Can someone please
help me write this?  I am very new and just learning so would really
appreciate some help.

Thanks,

Zac