title: Make collapsible Div align on right instead of left
body: <p>I'm using the exact code in this JS fiddle. <a href="http://jsfiddle.net/9Le8X/2/" rel="nofollow">http://jsfiddle.net/9Le8X/2/</a></p>
  
  <p>However, I want that collapsible div to function like this on the right side instead of the left, specifically, on first load I only want the orange square to be shown on the right side. When clicked the panel content pulls out from the right. I can't seem to get it to work. Any ideas?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="slide-panel"&gt;
      &lt;a href="#" class="btn btn-danger" id="opener"&gt;&lt;i class="glyphicon glyphicon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
      Panel Content
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#slide-panel {
      width:300px;
      height:300px;
      padding:10px;
      background:#eee;
      margin-left:-300px;
  }
  #opener {
      float:right;
      margin:-10px -50px 0px 0px;
      border-radius:0;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#opener').on('click', function() {       
          var panel = $('#slide-panel');
          if (panel.hasClass("visible")) {
              panel.removeClass('visible').animate({'margin-left':'-300px'});
          } else {
              panel.addClass('visible').animate({'margin-left':'0px'});
          }   
          return false;   
      });
  </code></pre>