title: Horizontal Sliding Panel with relative postion handle show/hide - jQuery
body: <p>I'm using <a href="http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/" rel="nofollow noreferrer">this tutorial</a> to produce a horizontal sliding div panel, and I succeed. Btw I'm concerned about the <strong>handle</strong> saying &quot;Info&quot;. I'm using my div to load a contact form. So in my case the text would be &quot;Contact us&quot; or something. So the text button will take a long space on the side, and in smaller res it can hide some texts. That's why I want to hide the handle also (something similar to <a href="http://web-kreation.com/demos/Sliding_login_panel_jquery/" rel="nofollow noreferrer">this</a>, but in a horizontal fashion).</p>
  <p>We can go for any of the two ways:</p>
  <p><strong>Option 1:</strong> The handle on the left of the panel, toggle with the show/hide-panel relatively.<br/>
  <strong>Option 2:</strong> Two handles, one to toggle the slide panel, and other to toggle the text-handle.</p>
  <p><img src="https://i.stack.imgur.com/i3fZw.png" alt="jQuery Sliding panel" /></p>
  <p>I think the issue is CSS, if not properly done, CSS is not doing what I'm looking for. But I'm in a mess with the CSS. :(</p>
  <p><strong>NOTE:</strong> I want the whole thing in fixed position on <code>right: 0</code>, like the image.</p>
  <h2>EDIT</h2>
  <p>Here's my code:</p>
  <pre><code>    &lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function(){
      $(&quot;.trigger&quot;).click(function(){
          $(&quot;.panel&quot;).toggle(&quot;medium&quot;);
          $(this).toggleClass(&quot;active&quot;);
          return false;
      });
  });
  &lt;/script&gt;
  &lt;style&gt;
  .panel{
      position: fixed;
      top: 109px;
      right: 0;
      display: none;
      background-color: #ededed;
      width: 300px;
      height: auto;
      padding: 1.25em;
      filter: alpha(opacity=85);
      opacity: .85;
  }
  
  a.trigger{
      position: fixed;
      top: 80px;
      right: 0;
      padding: 5px;
      color: #fff;
      display: block;
      background-color: #CDDD54;
  }
  &lt;/style&gt;
  
  &lt;div class=&quot;panel&quot;&gt;Panel content here&lt;/div&gt; &lt;!-- .panel --&gt;
  &lt;a class=&quot;trigger&quot; href=&quot;#&quot;&gt;Contact us&lt;/a&gt;
  </code></pre>