Question

I have two links with classes (login-form and register-form) relevant to their target forms ID, they want to toggle. I have also a predefined ‘slideToggle’ function to toggle better.

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 have trouble with the flashy window, and to correctly toggle the active classes when another link is clicked, the other link should not have active class anymore. Additional problem is the link is dead on serial clicks.

I have another try, longer one:

$('#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 one is worse than the first 🙁

Any suggestion to correct the behavior?

What I want is when a link with class login-form is click, so toggle the form with ID login-form, and hide the register-form if open.

Any help would be very much appreciated. Thanks.

Answer 1

Try using the .stop() method on any elements which the “slideToggle” effect is currently running before you toggle the class or try to hide it, eg:

$('#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;
});