$(document).ready(function(){ $("#menu_toggle_control").on('click',function(){ $("#left-menu").animate({ width: 'toggle', opacity: 'toggle' }, 'slow'); resizeMain(); }); function resizeMain(){ if($('#left-menu').css('display')!=='none'){ $("#main").css("width",($(window).outerWidth()-$("#left-menu").outerWidth())+"px"); } else{ $("#main").css("width",($(window).outerWidth())+"px"); }; }; $(window).load(function(){ resizeMain(); }); $(window).resize(function(){ resizeMain(); }); });

How to make the left menu hide when the button is pressed and the main occupies the entire width, and when you press the button back, the left menu appears and the main occupies the remaining width of the window?

  • and what is a “reverse button press”? "Re"? - aleksandr barakin
  • And where is the example of the wrong work can be seen? - Visman

1 answer 1

So for example:

 <style> #sidebar { width: 210px; height: 100%; position: fixed; background: #2a3542; } #main-content { margin-left: 210px; } .navbar{ cursor:pointer; color:red; } </style> <div class="navbar">Click Here To Toggle</div> <div id="sidebar">sidebar content here</div> <section id="main-content">main page content here</section> <script> $(function(){ $('.navbar').on('click', function(){ $('#sidebar').toggle('slide', { direction: 'left' }, 1000); $('#main-content').animate({ 'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px' }, 1000); }); }); </script>

You can take a look at jsfiddle in action