Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide/Show from left

Tags:

html

jquery

I have this code with which I can hide/show. I want the div to hide while it moves left. How can I do that? This is what I have FIDDLE

JavaScript

$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Show Content');
    }, function() {
        $(this).text('Hide Content');
    }).click(function(){
        $("#hidden_content").slideToggle("slow");
    });
});

HTML

<a href="#" id="button" class="button_style">Hide content</a>
<div id="hidden_content">Content</div>
like image 434
Benny Avatar asked Sep 19 '13 06:09

Benny


1 Answers

You can do it this way:

$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Show Content');
        $("#hidden_content").animate({left: "-50px"}, 500);        
    }, function() {
        $(this).text('Hide Content');
        $("#hidden_content").animate({left: "0px"}, 500);
    })
});

Demo Fiddle

like image 116
Greenhorn Avatar answered Sep 24 '22 15:09

Greenhorn