Horizontal Sliding Panel with relative postion handle show/hide - jQuery

Question

I'm using this tutorial to produce a horizontal sliding div panel, and I succeed. Btw I'm concerned about the handle saying "Info". I'm using my div to load a contact form. So in my case the text would be "Contact us" 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 this, but in a horizontal fashion).

We can go for any of the two ways:

Option 1: The handle on the left of the panel, toggle with the show/hide-panel relatively.
Option 2: Two handles, one to toggle the slide panel, and other to toggle the text-handle.

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. :(

NOTE: I want the whole thing in fixed position on right: 0, like the image.

EDIT

Here's my code:

    <script type="text/javascript">
$(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("medium");
        $(this).toggleClass("active");
        return false;
    });
});
</script>
<style>
.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;
}
</style>

<div class="panel">Panel content here</div> <!-- .panel -->
<a class="trigger" href="#">Contact us</a>

Answer 1

Yes, did it using this tutorial: http://www.building58.com/examples/tabSlideOut.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.8.1"></script>
<script type="text/javascript" src="http://www.building58.com/examples/js/jquery.tabSlideOut.v1.3.js"/>
<script type="text/javascript">
        $(function(){
            $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',   //class of the element that will become your tab
                pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab, Optionally can be set using css
                imageHeight: '122px',   //height of tab image, Optionally can be set using css
                imageWidth: '40px',     //width of tab image, Optionally can be set using css
                tabLocation: 'right',   //side of screen where tab lives, top, right, bottom, or left
                speed: 500,             //speed of animation
                action: 'click',        //options: 'click' or 'hover', action to trigger animation
                topPos: '100px',        //position from the top/ use if tabLocation is left or right
                leftPos: '20px',        //position from left/ use if tabLocation is bottom or top
                fixedPosition: true //options: true makes it stick(fixed position) on scroll
            });

        });
        </script>

        <div class="slide-out-div">
            <a class="handle" href="#">Contact us</a>
            <p>slide content here</p>
        </div>

Answer 2

This works with position fixed. Fiddle.

CSS

.panel {
    width:300px;
    float:left;
    height:550px;
    background:#d9dada;
    position:fixed;
    left:-290px;
}

.slider-arrow {
    padding:5px;
    width:10px;
    float:left;
    background:#d9dada;
    font:400 12px Arial, Helvetica, sans-serif;
    color:#000;
    text-decoration:none;
    position:relative;
    left:0px;
}

HTML

<div class="panel"></div>
<a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

jQuery

$(function(){
    $('.slider-arrow').click(function(){
        if($(this).hasClass('show')) {
            $( ".slider-arrow, .panel" ).animate({
                left: "+=290"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('«').removeClass('show').addClass('hide');
        } else {    
            $( ".slider-arrow, .panel" ).animate({
                left: "-=290"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('»').removeClass('hide').addClass('show');    
        }
    });

});