title: Sliding div onclick left/right
body: <p>Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?</p>
  
  <p>I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2</p>
  
  <p>If anyone can provide a jsfiddle, I'd greatly appreciate it ;)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="left"&gt;
      &lt;a href="#"&gt;Edit Profile&lt;/a&gt;
      &lt;a href="#"&gt;Settings&lt;/a&gt;
      &lt;a href="?logoff"&gt;Sign Out&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#left { width: 338px; border-left: 1px solid #333; float: left; }
  #left a {
    width: 145px;
    height: 22px;
    padding: 5px 12px;
    margin: 0;
    border-bottom: 1px solid rgba(204, 204, 204, 0.09);
    float: left;
    display: inline-block;
    position: relative;
    top: 34px;
    color: #15ADFF;
    font: 16px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
  }
  #left a:hover {
    width: 138px;
    background: rgba(204, 204, 204, 0.4);
    border-right: 7px solid #15ADFF;
    color: #111;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
  }
  </code></pre>
  
  <p>I'm assuming I'd need to add an id or class as either <code>#open</code>, <code>#close</code> and/or <code>.open</code>, <code>.close</code>.</p>