Jquery toggle .css

Question

I have this jquery code which runs fine.

$(window).load(function() {

    $('.menuBtn').click(function(e) {
        e.preventDefault();
        (this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
        $('nav').slideToggle();

        $('.headerBarm').toggleClass('fixed-position');
        $('nav').toggleClass('fixed-position');
        $('.headerBar').toggleClass('fixed-position');


        $('body').css({
            'height': '100%',
            'overflow': 'hidden'
        });

    });

});

Recently I added the last line.

$('body').css({
                'height': '100%',
                'overflow': 'hidden'
            });

When i click on the button the above css gets added.

My problem is, when i click it again it doesn't change back. Could this work with a toggle kind of ?

Answer 1

Create a custom class and toggle it.

.myclass {
  height: 100%;
   overflow: hidden;
}



$('body').toggleClass('myclass');

Answer 2

Why don't you continue your streak of classes and toggleClass()?

CSS:

body.full {
    height: 100%;
    overflow: hidden;
}

JS (replace that last line):

$("body").toggleClass("full");