$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

$('.information').click(function(e){
    $('.work-overlay').fadeOut();
    $('.information-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

I've got the following code that toggles an overlay, when .information is clicked and also toggles between overflow:hidden with toggleClass.

However, if I click .work and THEN .information, it breaks the toggleClass.

$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

$('.information').click(function(e){
    $('.work-overlay').fadeOut();
    $('.information-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

I've got the following code that toggles an overlay, when .information is clicked and also toggles between overflow:hidden with toggleClass.

However, if I click .work and THEN .information, it breaks the toggleClass.

• javascript
• jquery
• css
• toggle
• overflow

• 1 Create class with required elements and try toggleClass() – m1k1o Commented Aug 27, 2013 at 13:43

6 Answers 6

$("body").css("overflow", "hidden");

JQUERY CSS

Or to toggle

CSS:

.hidden {
   overflow: hidden;
}

JQUERY:

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

You can use toggleClass for this.

use this

$("body").css("overflow", "hidden");

to add toggle functionality use http://api.jquery./toggleClass/

css

.b_overflow { overflow:hidden; }'

js

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

updated after OP's ment

$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    if($(this).css('display') =='block'){
        $(this).css('overflow','scroll');
    }else{
        $(this).css('overflow','hidden');
    }
    e.preventDefault();
});

jQuery code:

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

And then create a class in your css:

.hidden {
  overflow: hidden;
}

this will world

#("body,html").css("overflow", "hidden");

the above solutions are perfect but toggling away body overflow bar will create a little lag on the website since page width will have difference.

Use $('body').toggleClass('overflow-hidden') to toggle a CSS class with the corresponding CSS styles