Move up / down using jQuery to a certain height - is this possible?

Question

Is it possible to copy a div up (close), but not completely?

I mean, slide up, but leave a little of this div, is it possible?

Thanks in advance, MEM

Answer 1

Something like this might work:

$("#div").toggle( function(){ $("#div").animate( { height:"500px" }, { queue:false, duration:500 }); }, function(){ $("#div").animate( { height:"50px" }, { queue:false, duration:500 }); }); 

Instead of 500px this can only be the original size of the div, and 30px can be what you want to show when it is intended to be hidden.

Answer 2

The best way to open a div to its original height is to use slideDown (). The problem is that this function requires the div to be hidden before it can open it. The following method is a bit ugly, but works well:

 $("#test").toggle( function(){ $("#test").css('height', 'auto').hide().slideDown('fast'); }, function(){ $("#test").animate( { height:'50px' }, { queue:false, duration:500 }); }); 

Answer 3

I do not recommend using the jQuery animation method because sometimes it does not work in some browsers. CSS slide transition animation is the best choice (for me) by setting div height or max height.

CSS

 .expandable { max-height: 3em; overflow: hidden; transition: max-height .3s; } 

when clicked, set max-height using jQuery:

 $(.someSelector).css('max-height', expandedHeight); 

Then remove the style when you click again:

 $(.someSelector).attr('style', ''); 

You can watch this demo