Redmine

<div id="main" class="<%= sidebar_content? ? 'collapsiblesidebar' : 'nosidebar' %>">

// collapsible sidebar JQuery plugin

(function($) {

  // main container this is applied to

  var main;

  // triggers show/hide

  var button;

  // the key to use in local storage

  // this will later be expanded using the current controller and action to

  // allow for different sidebar states for different pages

  var localStorageKey = 'redmine-sidebar-state';

  // true if local storage is available

  var canUseLocalStorage = function(){

    try {

      if('localStorage' in window){

        localStorage.setItem('redmine.test.storage', 'ok');

        var item = localStorage.getItem('redmine.test.storage');

        localStorage.removeItem('redmine.test.storage');

        if(item === 'ok') return true;

      }

    } catch (err) {}

    return false;

  }();

  // function to set current sidebar state

  var setState = function(state){

    if(canUseLocalStorage){

      localStorage.setItem(localStorageKey, state);

    }

  };

  var applyState = function(){

    if(main.hasClass('nosidebar')){

      button.html("«");

      setState('hidden');

    } else {

      button.html("»");

      setState('visible');

    }

  };

  $.fn.collapsibleSidebar = function() {

    main = this;

    // create the toggle button

    var panel = $('<div id="sidebar-switch-panel"></div>');

    button = $('<a id="sidebar-switch-button" href="#"></a>');

    button.click(function(e){

      main.addClass("animate");

      main.toggleClass('nosidebar');

      applyState();

      e.preventDefault();

      return false;

    });

    panel.append(button);

    main.find('#content').prepend(panel);

    // determine previously stored sidebar state for this page

    if(canUseLocalStorage) {

      // determine current controller/action pair and use them as storage key

      var bodyClass = $('body').attr('class');

      if(bodyClass){

        localStorageKey += '-' + bodyClass.split(/\s+/).filter(function(s){

          return s.match(/(action|controller)-.*/);

        }).sort().join('-');

      }

      var storedState = localStorage.getItem(localStorageKey);

      main.toggleClass('nosidebar', storedState === 'hidden');

    }

    applyState();

  };

}(jQuery));

$(document).ready(function(){

  $('#main.collapsiblesidebar').collapsibleSidebar();

});

#content { background-color: #fff; margin: 0 25% 0 0; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }

* html #content{ margin-right: 25%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}

#main.nosidebar #sidebar { display: block; margin-right: -25%; }

#main.nosidebar #content{ border-right: 0; margin-right: 0; }

#main.animate { transition: background-position 0.2s ease-in-out; }

#main.animate #sidebar, #main.animate #content { transition: margin 0.2s ease-in-out; }

#sidebar-switch-panel {

  background-color: #EEEEEE;

  border-bottom: 1px solid #DDDDDD;

  border-left: 1px solid #DDDDDD;

  border-top: 1px solid #DDDDDD;

  float: right;

  left: 10px;

  top: 2px;

  position: relative;

  padding: 2px;

}