jQuery changing toggle button symbols

Question

I have situation like this: I have an menu and it's only shows up, then the button is clicked. Everything works fine, except when after menu is open, I want it to close. The button symbol is not changing and stuck on "close". What I did wrong?

    $(document).ready(function () {
     $(".menu-button").click(function () {
         $(".first-page nav").slideToggle(500);
     });
     if ($('.menu-button').hasClass("menu-open")) {
         $('.menu-button').on('click', function () {
             $(this).removeClass('menu-open');
             $(this).addClass('menu-close');
         });
     }
     if ($('.menu-button').hasClass("menu-close")) {
         $('.menu-button').on('click', function () {
             $(this).removeClass('menu-close');
             $(this).addClass('menu-open');
         });
     }
 });

Fiddle: http://jsfiddle.net/a0kscpa3/

Answer 1

You could always tidy the JS up by simplifying the function so that there are no conditional statements or multiple click events.

Take a look at this jsFiddle

$('.btn').on('click',function(e){
    e.preventDefault();
    $('.menu').stop().slideToggle();
    $(this).toggleClass('menu-open');
});

Also the jQuery stop() function is used to prevent the animation from being queued when the user clicks multiple times.

Answer 2

As I mentioned in comment, Your second if condition in original post will never be called. And as @Tyr said, you need to apply condition like this,

$(document).ready(function () {
    $(".menu-button").click(function () {
        $(".first-page nav").slideToggle(500);
    });

    $('.menu-button').on('click', function () {

        if ($('.menu-button').hasClass("menu-open")) {

            $(this).removeClass('menu-open');
            $(this).addClass('menu-close');
        }
       else if ($('.menu-button').hasClass("menu-close")) {
            $(this).removeClass('menu-close');
            $(this).addClass('menu-open');
        }
    });

});

Answer 3

    $(document).ready(function(){
        var flag= false;
        $(".menu-button").click(function(){
            $(".first-page nav").slideToggle(500);
            if(flag==false){
                flag = true;
                $(this).removeClass('menu-open');
                $(this).addClass('menu-close');
            }else{
                flag = false;
                $(this).removeClass('menu-close'); 
                $(this).addClass('menu-open');
            }
        });


    });