I have this sidebar of sales info that I want to slide out and back on click. Right now it will slide out but it won't slide back once I have clicked it once. If someone could figure out why the code won't work that would be great.

Also, I want the div to move a little to the left when you hover but only when it is all the way to the left. I am doing this to make it a little more noticeable that it is able to be clicked.

Here is the html:

```
<div id="sidebar">
<div id="sales">
    <div id="salesbar">
        <img id="sales_img" src="/images/sales.png"/>
            <h3>Contact Sales</h3>
            <p>
                For more information 
                please email us or call:
            </p>
        </div>    
    </div>
</div>

```

Jquery:

```
$(document).ready(function() {
        var sales = $('#sales', '#sidebar'),
            image = $('#sales_img', '#salesbar'),
            rt = sales.css('right');
    image.click(function(event) {           
        if(rt == '0px' || rt == '5px') {
            sales.animate({
                'right':'235px'
            }, 600); 
        } else {
            sales.animate({
                'right': '0px'
                }, 600);
        }
            event.preventDefault();
    }); 
sales.hover(
        function() {
            if(rt == '0px' || rt == '5px') {
                sales.css('right','5px');
            }
        }, function () {
            if(rt == '5px') {
                sales.css('right', '0px');
            }
        }
    );

    });

```

To summarize, I would like to click once on the sales bar and have it pop out and stay there. Then when you click on it again, go back to where it started. If possible, it would be great if when you hover it moves over 5px then on the way out goes back.

Here is the jsfiddle with the css as well: <http://jsfiddle.net/yzvswLwx/1/>

Thanks in advanced