Переключить стиль CSS в теле HTML страницы

Question

У меня есть sample here, где я пытаюсь переключить стили CSS тела с помощью JQuery, как,

$('body').toggle(function() { 
     (this).css('padding-top', '0px'); 
     (this).css('background-color', 'green'); 
    }, 
     function() { 
     (this).css('padding-top', '50px'); 
     (this).css('background-color', 'yellow'); 
     }); 

Но когда я нажимаю на кнопку тело полностью исчезает. Как я могу достичь того же?

Answer 1

Попробуйте использовать toggleClass вместо

http://jsfiddle.net/nwL67ao4/1/

CSS:

body { 
    padding-top: 50px; 
    background-color: yellow; 
} 
.hide { 
    padding-top: 0px; 
    background-color: green;  
} 

JS:

$('button').click(function() {  
    $('body').toggleClass("hide"); 
}); 

HTML:

<button>ABCD</button>