My menu isn't toggling the “fullscreen” class correctly using jQuery

Question

This is the link to my pen on CodePen where I am making this menu - http://codepen.io/PartTimeCoder/pen/YqYmgv

In my jQuery code, I have the following:

$(".menu").click(function() {
    $(this).addClass("fullscreen");
    $("p").show();
});

if ($('.menu').hasClass("fullscreen")) {
    $(".toggle").click(function() {
        $(".menu").removeClass("fullscreen");
    });
} else {
    $(".toggle").click(function() {
        $(this).toggleClass("active");
        $(".menu").toggleClass("active");
        $("p").hide();
    });
}

When the menu has the fullscreen class I just want to remove the fullscreen class from the current section, but not completely close the menu. I don't know how to do this, after struggling with jQuery and Javascript versions of hasClass, I still couldn't get it to work. All help is appreciated! Thanks in advance!

Answer 1

Simply invert the if else to inside the click function like so:

$(".menu").click(function() {
    $(this).addClass("fullscreen");
    $("p").show();
});


$(".toggle").click(function() {
    if ($('.menu').hasClass("fullscreen")) {
        $(".menu").removeClass("fullscreen");
    } else {
        $(this).toggleClass("active");
        $(".menu").toggleClass("active");
        $("p").hide();
    }
});

http://codepen.io/anon/pen/JXpjXq