CODEWITHSUNDEEP
jqueryshow-hide
moreinet
moreinet

Reputation: 55

Jquery 1 Click Hide and Show left to Right

I would like my jQuery script one click hide and show, when DIV it hide the link show the word SHOW, and when it Show the link show the Word HIDE.

Please can you look for me.

Best Regards.

$(document).ready(function() {
    $('#hide').click(function(e) {
        $('.DIV').delay(500).animate({
            marginLeft: '-100%',
        });
        return false;
    });

    $('#show').click(function(e) {
        $('.DIV') .delay(500) .animate({
            marginLeft: '0%',
        });
        return false;
    });
});

Upvotes: 0

Views: 2472

Answers (1)

micadelli
micadelli

Reputation: 2482

One way to do it is with toggle and animate left. You need to set position to relative in order to slide it.

HTML 

<div id="toggleDiv">hide</div>
<div class="test">Some text</div>​

CSS 

.test {
 position: relative;
}

jQuery

$('#toggleDiv').toggle(function() {
    $('.test').delay(500).animate({
        'opacity': 0,
        'left': '-100%'
    });
    $(this).delay(1000).queue(function(n) {
        $(this).html('show');
        n();
    });
}, function() {
    $('.test').delay(500).animate({
        'opacity': 1,
        'left': '0%'
    });
    $(this).delay(1000).queue(function(n) {
        $(this).html('hide');
        n();
    });
});​

JSFiddle
http://jsfiddle.net/dW8Rv/1

Upvotes: 1

Related Questions