Hidden Colum Layout

Attemping to make a layout in which the right panel is hidden until the click of a button

by stevescotthome

HTML

<div id="header"></div>

<div id="container">
  <div id="center" class="column">
    <ul id="pods">
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
          <li>item4</li>
          <li>item5</li>
      </ul>  
      <div style='clear:both'>&nbsp;</div>
  </div>
  <div id="left" class="column">
      <ul>
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
          <li>item4</li>
          <li>item5</li>
      </ul> 
  </div>
  <div id="right" class="column">
      Single Item Details 
      <span id='close'>close</span>
  </div>
</div>

<div id="footer"></div>

CSS

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
  background: #e6e6e6;
}
#right {
  width: 150px;          /* RC width */
  margin-right: 0;  /* RC width */
  background: #f1f1f1;
}
#footer {
  clear: both;
}

#pods li{
    height: 50px;
    width: 75px;   
    background: #e6e6e6;
    margin-right: 10px;
    margin-bottom: 10px;
    float:left;
}

JavaScript

$(document).ready(function(){
    $('#pods').click(function(){
        $('#right').css('margin-right','-150px');
    });
    
    $('#close').click(function(){
        $('#right').css('margin-right','0');
    });
    
    
});