Toggle two divs and classes

Posted by kuswantin on Stack Overflow See other posts from Stack Overflow or by kuswantin
Published on 2010-04-15T12:14:08Z Indexed on 2010/04/15 12:33 UTC
Read the original article Hit count: 277

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about visibility