Question

I asked this question earlier today. After trying out suggestions from a few members, I could not
accomplish what I want to do.

Here is a little more detail. I am trying to achieve a “Sign In/Sign Out” toggle functionality
when I click on a hyperlink. On my main page I have HTML like this:

<div id="signbtn">
        <a class="btnsignin" href="signin.php">Admin</a>
</div>

When I click the anchor link, I am showing a login form using .ajaxForm success: function. After I sign in,
the code inside this function changes the class to “btnsignout” and the title of the link to “Sign Out”.

I use the below code to toggle the anchor class to “btnsignin”, to log back in. The login form does not show up when I click on the anchor link.

$('#signbtn').click(function() { 
    $.each($(this).children('a'), function(){
        if($(this).hasClass('btnsignout')){
            $(this).attr('class', 'btnsignin');
        }
    })
});

Could someone point out to me where I am going wrong here? Thanks.

Answer 1

Not sure if this is the cause, but you should use addClass and removeClass to toggle classes. And you could shorten it to $(this).find(‘a’).removeClass(‘btnsignin’).addClass(‘btnsignout’)