title: Refresh/Reload div tag container after size change
body: <p>I am using bootstrap with Jquery/Javascript and Leaflet maps.
  I have pBody div which has the map div within it. I also have a sidebar div. The toggle switch above collapses the sidebar div and should increase the width of pBody div from span9 to span11. The collapse is working fine which is in CSS but the problem is the map is not redrawing to the new size of the div. I have tried with the code below:</p>
  
  <pre><code>$("#toggle").click(function (event) {
      event.preventDefault();
  
      $('#pBody').toggleClass('span9');
      $('#pBody').toggleClass('span11');
  
       //L.Util.requestAnimFrame(map.invalidateSize, map, !1, panelBody._container); 
       //I have tried this above line but still does not work. 
  
       $("#map").width("100%");
       map.invalidateSize(false); //this is leaflet function which should redraw the map. 
  });
  </code></pre>
  
  <p>The extra space generated in the map div is filled with grey. And everytime you zoom in/out of the map it will sometimes draw the map fully to the whole size or sometimes includes the grey space. </p>