I have a div that I want when user click on a button slideUp in bottom of page and cover 30% of my page and if user click on that button my div slideDown.How I can do this?

thanks

EDIT 1)

$(document).ready(function () {
        $('#btnWorks').on("click", function () {
            $('#tblWorks').slideToggle();
        });

    });

but it open from top to bottom.but I want open it from bottom to top

I have a div that I want when user click on a button slideUp in bottom of page and cover 30% of my page and if user click on that button my div slideDown.How I can do this?

thanks

EDIT 1)

$(document).ready(function () {
        $('#btnWorks').on("click", function () {
            $('#tblWorks').slideToggle();
        });

    });

but it open from top to bottom.but I want open it from bottom to top

• javascript
• jquery
• asp

4 Answers 4

Check out some of jQuery's documentation:

http://api.jquery./slideUp/

http://api.jquery./slideDown/

It depends on where you have this element positioned or placed. If it's positioned absolute it may look like it slides up but it is really sliding down. When you call slideToggle() it will slideDown() if the element is hidden, and slideUp() if the element is already visible.

jsFiddle of slideToggle, 2 examples: http://jsfiddle/HjJBZ/

You should put the element in a container div and slide the container div down instead which may work better.

Try using jQuery's slideToggle.

http://jsfiddle/CLbzf/

$('#trigger').click( function() {
    $('#slider').slideToggle();
});​

slideUp hides the elements, slideDown shows the elements. If you've anchored the elements via absolute positioning, you should still use slideDown to show the element, even though it might animate upwards.