Come trasformarlo in un div scorrevole a sinistra / a destra

Di seguito è riportato uno snippet dal mio codice html e css, come e cosa dovrei aggiungere non solo in html e css, ma anche javascript per farlo funzionare come slide in / out nella direzione di (right to open) e (sinistra per chiudere) div?

 #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); } 

Al momento non ho scritto alcun javascript per questo perché non so da dove cominciare … Io, tuttavia, utilizzo jquery-1.3.2

EDIT: Se qualcuno può fornire un jsfiddle, lo apprezzerei molto;)