Toggling hide-visible overflow onclick

Question

I'm a newbie in JQuery so I ask you help to me.. How I can hide overflow in html after click on dropdown button menu and after closing toggle overflow as visible.

I tried this, but it allowed only to hide the overflow. Then how I can toggle hide-scroll?

$(document).ready(function() {
   $('.button').on('click', function() {
      $('html').css("overflow", "hidden");
   });
});

Answer 1

You can do it by using .css()'s callBack function,

$(document).ready(function() {
   $('.button').on('click', function() {
      $('html').css("overflow", function(_,val){ 
           return val == "hidden" ? "scroll" : "hidden";
      });
   });
});

DEMO