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?

Is it exactly the same code you are using? Same jQuery version etc.? — putvande
– putvande, Commented Jul 28, 2013 at 9:51
Note that fn.toggle which took two or more functions was deprecated in 1.8 and removed in 1.9 — mplungjan
– mplungjan, Commented Jul 28, 2013 at 9:56

Roko C. Buljan · Accepted Answer · 2013-07-28 12:04:23Z

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);
    });
});

edited Jul 28, 2013 at 12:04

answered Jul 28, 2013 at 11:11

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bhojendra Rauniyar Over a year ago

Nice, could you please show me a demo which hides if other tab is opened as likely to this jsfiddle.net/p9jTf/5 and +1 for parseInt method.

Rishi Kulshreshtha · Accepted Answer · 2013-07-28 09:53:46Z

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>

Collectives™ on Stack Overflow

using click function instead of toggle

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related