Slide Up/Down with JQuery until a certain height - is this possible?
Solution 1
Something like this may work:
$("#div").toggle(
function(){
$("#div").animate( { height:"500px" }, { queue:false, duration:500 });
},
function(){
$("#div").animate( { height:"50px" }, { queue:false, duration:500 });
});
Instead of the 500px
it can just be the original size of the div, and the 30px
can be however much you want to show when it's meant to be hidden.
Update from the comments
Here's a fiddle showing that it can allow different heights if declared in a variable. And fading out after animation shouldn't be a problem.
http://jsfiddle.net/Skooljester/HdQSX/
var divTest = $("#test").height();
$("#test").toggle(
function(){
$("#test").animate({ height: divTest + 'px' }, { queue: false, duration: 500 });
},
function(){
$("#test").animate({ height:'50px' }, { queue: false, duration: 500 });
});
#test {
display: block;
background: #FF0000;
height: 500px;
width: 300px;
}
<div id="test">Test</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Solution 2
I don't recommend using jQuery's animate method because it's sometimes buggy in some browsers. Animate the slide with CSS transitions is a better choice (according to me), by setting the div height or max-height.
CSS:
.expandable {
max-height: 3em;
overflow: hidden;
transition: max-height .3s;
}
on click, set max-height with jQuery:
$(.someSelector).css('max-height', expandedHeight);
Then remove the styling when it's clicked again:
$(.someSelector).attr('style', '');
You can look at this demo example
Solution 3
The better way to open div to its original height is using slideDown(). The problem is that this function requires div to be hidden before it can open it. The following way is a little bit ugly but works well:
$("#test").toggle(
function(){
$("#test").css('height', 'auto').hide().slideDown('fast');
},
function(){
$("#test").animate( { height:'50px' }, { queue:false, duration:500 });
});
MEM
Updated on June 20, 2022Comments
-
MEM almost 2 years
Is it possible to slide a div up (closing it) but not completely ?
I mean, slide up but leave a little of that div displayed, is that possible ?
Thanks in advance, mem
-
MEM over 12 yearsThanks a lot! Two things: 1) We must declare the original div height always? I am asking this because... the height may vary depending on content. 2) If we wish to, after this, fade out that little portion that we have just animate, it will be ok yes?
-
ayyp over 12 yearsHere's a fiddle showing that it can allow different heights if declared in a variable: jsfiddle.net/Skooljester/HdQSX And fading out after animation shouldn't be a problem.
-
Gleb Kemarsky over 3 yearsapi.jquery.com/toggle-event "This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named
.toggle()
that toggles the visibility of elements."