CODEWITHSUNDEEP
javascriptjquerycss
Carsten Løvbo Andersen
Carsten Løvbo Andersen

Reputation: 27041

Can't make the if else jquery statement work

I added the code to the js below. When you click on either the Sign up or Login the arrow moves / point up, but when you close it again it stay that way. Can someone help me out figure what to do.

I tried using this post but cant make this work either here

Here is the Jquery script I use

$(document).ready(function () {
        $('#login-trigger').click(function () {
            $('#login-content').slideToggle();
            $(this).addClass('active');
            if ($(this).hasClass('active')) $(this).find('span').html('▲');

            $('#signup-content').slideUp();
        })
        $('#signup-trigger').click(function () {
            $('#login-content').slideUp();
            $(this).addClass('active');
            if ($(this).hasClass('active')) $(this).find('span').html('▲');

            $('#signup-content').slideToggle();
        });
    });

Here is my jsfiddle, ( I know some people don't pref jsfiddle but since I have a lot of code and it will be so much easier to show what I'm trying to do with it)

Upvotes: 1

Views: 135

Answers (3)

user1498339
user1498339

Reputation: 629

You never remove the class active, so after the first click it looks like it is always active, and you also never change the triangle shape after the first click.

This code should work for the login:

$('#login-trigger').click(function () {
        $('#login-content').slideToggle();


        if (!$(this).hasClass('active')) { //Now is not active, I'll make it active
            $(this).addClass('active');    //Add class
            $(this).find('span').html('▲');  //BLACK UP-POINTING TRIANGLE
        } else { //Now is active, I'll make it not active
            $(this).removeClass('active');  //Remove class
            $(this).find('span').html('▼');  //BLACK DOWN-POINTING TRIANGLE
        }

       $('#signup-content').slideUp();
    })

This is the jsfiddle link.

Upvotes: 0

bipen
bipen

Reputation: 36531

the problem is since you are adding the class active to it, on click event .. and right after, you are checking if it has a class active(which is always true)...

use toggleClass(it toggles the mentioned class) instead of addClass and check with hasClass

 $(document).ready(function () {
    $('#login-trigger').click(function () {
         $('#login-content').slideToggle();
         $(this).toggleClass('active');
         if ($(this).hasClass('active')){              
             $(this).find('span').html('▲');
        }else{
           $(this).find('span').html('▼'); 

        }
        $('#signup-content').slideUp();
     });
    .... //same for signup

fiddle here

and yes I know some people don't pref jsfiddle .. i guess you are wrong , i am sure most people prefer jsfiddle rather than the code itself since it is easier to test in fiddle.

Upvotes: 1

codingrose
codingrose

Reputation: 15699

You missed else part.

Try:

$(this).toggleClass('active');
if ($(this).hasClass('active')){
    $(this).find('span').html('▲');
}
else{
    $(this).find('span').html('▰');//code of down arrow
}

Fiddle here.

Upvotes: 0

Related Questions