title: jQuery Slide Inner div from right to left
body: <p>Here's what I've got so far:</p>
  
  <p><a href="http://jsfiddle.net/phantasmix/nAaMV/4/" rel="nofollow">JSFiddle</a></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#button-top { width: 100px; position: absolute; left: 75%; top: 40px; padding-left: 100px;overflow: hidden;}
  #button-top:hover, #button-bottom:hover {cursor: pointer;}
  .slide { position: relative; height: 100px; overflow: hidden; width: 350px; }
  .slide img {position: relative; z-index: 100;}
  .slide p {width: 80px; padding:8px 16px; color: #fff; margin: 0; }
  .innerTop, .innerBottom { position: absolute; left: 0; top: 10px; width: 200px; height: 90px; padding: 6px; background: url(http://i39.tinypic.com/nz4ldw.png) 0 0 no-repeat; z-index: 50; display: none; }
  
  #button-bottom { width: 100px; position: absolute; left: 75%; top: 240px; padding-left: 100px;overflow: hidden;}
  </code></pre>
  
  <p>SCRIPT:</p>
  
  <pre><code>$('#button-top').click(function() {
    $('.innerTop').toggle('slide');
  });
  $('#button-bottom').click(function() {
    $('.innerBottom').toggle('slide');      
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="hide-mobile" id="button-top"&gt;
  [IMG]
  &lt;div class="slide innerTop"&gt;&lt;p&gt;HIDDEN SLIDING CONTENT&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="hide-mobile" id="button-bottom"&gt;
  [IMG]
  &lt;div class="slide innerBottom"&gt;&lt;p&gt;HIDDEN SLIDING CONTENT&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like the blue inner div to slide from RIGHT to LEFT.</p>