using click function instead of toggle

Question

Here is the jQuery I'm using:

jQuery(document).ready(function () {
    jQuery(".controller a").click(function () {
        jQuery(this).parents('.slider').toggleClass('sliderclick');
        jQuery(this).parents('.slider').animate({left:'0px'},1000);
        jQuery(this).parents('.sliderclick').animate({left:'-200px'},1000);
        return false;
    });
});

Demo

In the jsfiddle, it works perfectly but when I tried it on my localhost, it first toggles when first click and after then it get works perfectly. If I use toggle() function it amazingly hides say toggles the a. How can I do?

Answer 1

You can go for:
check the current position of your element and turn it into a boolean(!parseInt($par.css('left'), 10)). Than, using a simple ternary operator move it to 0 or -200 px left respectively:

http://jsfiddle.net/p9jTf/3/

jQuery(function( $ ) {
    $(".controller").click(function ( e ) {
        e.preventDefault();
        var $par = $(this).closest('.slider');        
        $par.animate({left : !parseInt($par.css('left'), 10) ? -200 : 0},1000);
    });
});

Here is an example that will hide an opened element using a class:

http://jsfiddle.net/p9jTf/6/

jQuery(function( $ ) {
    $(".controller").click(function (e) {
        e.preventDefault();
        var $par = $(this).closest('.slider');
        $('.opened').stop().animate({left:-200},1000).removeClass('opened');
        $par.toggleClass('opened').animate({
            left: !parseInt($par.css('left'), 10) ? -200 : 0
        }, 1000);
    });
});

Answer 2

I've tried this at my local and its working absolutely fine, please check:

<style type="text/css">
#slider {
    position: fixed;
    top: 0%;
    left:0;
    overflow: hidden;
}
#slider .moduletable {
    margin-bottom: 7px;
}
#slider .moduletable:last-child {
    margin-bottom: 0;
}
.button-wrap > div {
    display: table-cell;
}
.controller {
    width: 55px;
    height: 216px;
    background: #000;
    border-radius: 0 19px 19px 0;
    text-align: center;
    vertical-align: middle;
}
.controller div {
    transform: rotate(90deg);
    white-space: nowrap;
    width: 55px;
    margin-top: -30px;
}
.controller a {
    font-size: 20px;
    line-height: 0;
}
.controller a:hover, .controller a:active, .controller a:visited, .controller a:link {
    text-decoration: none;
}
.content-wrap {
    width: 200px;
    height: 216px;
    background: #403728;
}
.slider {
    position: relative;
    left: -200px;
}
</style>

<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<!-- Applying Custom JS Functions -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $(".controller a").click(function () {
        $(this).parents('.slider').toggleClass('sliderclick');
        $(this).parents('.slider').animate({
            left: '0px'
        }, 1000);
        $(this).parents('.sliderclick').animate({
            left: '-200px'
        }, 1000);
        return false;
    });
});
</script>

<!-- Your HTML -->
<div id="slider">
    <div class="moduletable">
        <div class="slider sliderclick" style="left: -200px;">
            <div class="button-wrap">
                <div class="content-wrap" id="button-1">Booking Contents</div>
                <div class="controller">
                    <div><a href="#buttton-1">Booking</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="moduletable">
        <div class="slider sliderclick" style="left: -200px;">
            <div class="button-wrap">
                <div class="content-wrap" id="button-1">Special Offer Content</div>
                <div class="controller">
                    <div><a href="#buttton-1">Special Offer</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>