jQuery slideDown, slideUp, slideToggle can be used to display, hide or toggle and element in sliding motion.
.slideDown( [duration ] [, complete_callback ] ) .slideDown( [duration ] [, easing ] [, complete_callback ] ) .slideDown( options ) .slideUp( [duration ] [, complete_callback ] ) .slideUp( [duration ] [, easing ] [, complete_callback ] ) .slideUp( options ) .slideToggle( [duration ] [, complete_callback ] ) .slideToggle( [duration ] [, easing ] [, complete_callback ] ) .slideToggle( options )
Example – slideDown
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div style="display:none;background-color:lightblue;margin:10px;" id="slide1">Hello</div>
<button onclick="clickHander()">Click to slide down hidden element</button>
<script type="text/javascript">
function clickHander() {
$("#slide1").slideDown();
}
</script>Example – slideDown with more options
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div style="display:none;background-color:lightblue;margin:10px;" id="slide1">Hello</div>
<button onclick="clickHander()">Click to slide down hidden element</button>
<div id="log"></div>
<script type="text/javascript">
function clickHander() {
$("#slide1").slideDown(1000, "swing", function() { $("#log").append("Done")});
}
</script>Example – slideUp
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div style="background-color:lightblue;margin:10px;" id="slide1">Hello</div>
<button onclick="clickHander()">Click to slide up element</button>
<script type="text/javascript">
function clickHander() {
$("#slide1").slideUp();
}
</script>Example – slideToggle
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div style="background-color:lightblue;margin:10px;" id="slide1">Hello</div>
<button onclick="clickHander()">Click to slide toggle element</button>
<script type="text/javascript">
function clickHander() {
$("#slide1").slideToggle();
}
</script>
