Toggle two divs and classes

Question

I have two class links (login form and registration form) related to their identifier of the target form that they want to switch. I also have a predefined slideToggle function for switching.

This is what I have tried so far:

$('#userbar a').click(function() {
      var c = $(this).attr('class');
      $('#userbar a').removeClass('active');
      $(this).toggleClass('active');
      $('#register-form,#login-form').hide(); //bad, causing flashy
      $('#' + c).slideToggle('slow');

        return false;
    });

With this, I am having problems with a bright window and to correctly switch active classes when clicking another link, another link should not have an active class. An additional problem is that the link is dead on serial clicks.

I have another attempt, longer:

$('#userbar a').click(function() {
      var c = $(this).attr('class');
        switch (c) {
        case 'login-form':
            $('#' + c).slideToggle('slow');
            $(this).toggleClass('active');
            $('#register-form').hide();
            break;
        case 'register-form':
            $('#' + c).slideToggle('slow');
            $(this).toggleClass('active');
            $('#login-form').hide();
            break;
        }
        return false;
    });

This is worse than the first :(

Any suggestion for correcting the behavior?

What I want is to click on the link with the login form to the class, so go to the login ID form and hide the registration form if it is open.

. .

Answer 1

.stop() , "slideToggle", , :

$('#userbar a').click(function() {
  var c = $(this).attr('class');
  $('#userbar a').stop(); //stop any currently running animations, which might be messing with the "hide()" method below
  $('#userbar a').removeClass('active');
  $(this).toggleClass('active');
  $('#register-form,#login-form').hide(); //bad, causing flashy
  $('#' + c).slideToggle('slow');

    return false;
});