Question

I customize a collapsible sidebar from this article
(http://devheart.org/articles/jquery-collapsible-sidebar-layout/) for my own project But it looks a bit funky and not right.

Please take a look at the project here:

http://jsbin.com/oliluz/45

The sidebar seems animating properly, but the #mainContent isn’t animating along with the sidebar. It’s toggling in stiffly and harsh.

Also advice if the way i added my code are optimize.

Thanks!

Answer 1

The new width of the #mainContent is determined by CSS; which is why it isn’t animated. To animate the width of the mainContent as well, try the following:

1. Remove the following line from the CSS:

   #wrap.sidebar #mainContent { margin-right: 270px; }
   

2. Modify the JavaScript to add the appropriate animations:

   // Variables
   var objMain = $('#wrap'), objSidebar = $('#sidebar');
   
   var objContent = $('#mainContent'); // << ADDED
   
   // Show sidebar
   function showSidebar(){
     objMain.removeClass('nosidebar');
     objMain.addClass('sidebar');
     objSidebar.animate({ 'right' : '0'},'slow');
     objContent.animate({ 'margin-right': 270}, 'slow'); // << ADDED
     $.cookie('sidebar-pref2', 'use-sidebar', { expires: 30 });
   }
   
   // Hide sidebar
   function hideSidebar(){
     objMain.removeClass('sidebar');
     objMain.addClass('nosidebar');
     objSidebar.animate({ 'right' : '-254px'},'slow');
     objContent.animate({ 'margin-right': 0}, 'slow'); // << ADDED
     $.cookie('sidebar-pref2', null, { expires: 30 });
   }