CODEWITHSUNDEEP
jqueryhtmlcssslide
Vince
Vince

Reputation: 1133

Jquery: slide down menu on click

I want to create an order form. I have the following:

Closed Form

Opened Form

How can I animate it to slide down and up? I know the function .slideDown() / .slideUp() or .slideToggle. But I want to animate the button too. So, it's getting difficult for me.

Second question: Can I realize that without images?

Upvotes: 0

Views: 2527

Answers (3)

Alpesh Shah
Alpesh Shah

Reputation: 123

Use CSS to shape the handle instead of images and gradients for the background, but this should serve as a starting point for you.

$("#handler").click(function(){    

$('#opener, #closer').toggle();

var container = $( "#container" ),
    mt = container.css('margin-top').split('px')[0],
    op = (mt<0)?'+=169px':'-=169px';

 container.animate({
        'margin-top': op
    }, 500);

});

JSFiddle

Upvotes: 0

Tushar
Tushar

Reputation: 4418

You can do it using postion: absolute to button.

Check if this helps you. http://codepen.io/anon/pen/wakgp

Upvotes: 0

Prosto Trader
Prosto Trader

Reputation: 3527

Use jquery animate for margin-top. It looks better then animating height:

 $("#handler").click(function(){    

$('#opener, #closer').toggle();

var container = $( "#container" ),
    mt = container.css('margin-top').split('px')[0],
    op = (mt<0)?'+=169px':'-=169px';

 container.animate({
        'margin-top': op
    }, 500); 
});

Here is an example: JSFiddle

Upvotes: 2

Related Questions