active class remains when clicked twice

active class remains when clicked twice

Hi,

I created a menu that sets a color when a button is clicked. The menu is constructed from an UL element. This is my jQuery code:

  1.             $(document).ready(function () {
  2.                 $('a.highlight').each(function () {
  3.                     var text = $(this).text();
  4.                     $(this).append('<span class="hover">'+text+'</span>');
  5.                     var $span = $('> span.hover', this).css('opacity', 0);
  6.  
  7.                     $(this).hover(function () {
  8.                         $span.stop().fadeTo(500, 1);
  9.                     }, function () {
  10.                         $span.stop().fadeTo(500, 0);
  11.                     }).click (function () {
  12.                         $('a.highlight > span.active').removeClass().css('padding-left', 10).css('padding-right', 10)
  13.                         //$('a.highlight > span.active').toggleClass('active');
  14.                         $(this).empty().append('<span class="active">'+text+'</span>');
  15.                         //$('a.highlight > span.active').removeClass()
  16.                         //$(this).toggleClass("active");
  17.                     });
  18.             });
When one of the buttons is clicked the button fades to the ".active" class and a background color is applied. When another button is clicked, the active state from the button is removed and the clicked button becomes active. This works fine except if I click the currently active button again. When it is active is should become inactive. How do I do this?

Note: It may sound not logic do to this, but the buttons triggers a slide out. When the slide out is active the button is colored, when this same active button is clicked again, it triggers the slide out to slide back in and the button must become inactive (no color). Only one button can be active at a time.