slideUp()
and slideDown()
methodsYou can simply use the jQuery slideUp()
and slideDown()
methods to hide and show the HTML elements with a smooth sliding motion using a single line of code.
Let's try out the following example to understand how these methods basically work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideUp and slideDown Effect</title>
<style>
.box{
width: 400px;
background: #f0e68c;
border: 1px solid #a29415;
}
.box-inner{
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$(".slide-up").click(function(){
$(".box").slideUp();
});
$(".slide-down").click(function(){
$(".box").slideDown();
});
});
</script>
</head>
<body>
<button type="button" class="slide-up">Slide Up</button>
<button type="button" class="slide-down">Slide Down</button>
<hr>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>
</body>
</html>
Alternatively, you can use the jQuery slideToggle()
method that perform both slide up and down animation in such a way that if the element is initially displayed, it will be hidden; and if it is hidden, it will be shown. Let's check out the following example to see how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideToggle Effect</title>
<style>
.box{
width: 400px;
background: #f0e68c;
border: 1px solid #a29415;
}
.box-inner{
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$(".slide-toggle").click(function(){
$(".box").slideToggle();
});
});
</script>
</head>
<body>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet...</div>
</div>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com
Laravel 7 Highcharts Tutorial Example
In this tutorial, i am going to show you...How to get the position of an element relative to the document using jQuery
Use the jQuery offset() method...How to Implement Datepicker in React with Example
Welcome to How to Implement and use Date...How to Create Custom Maintenance Page in Laravel 7.x Example
In this article, I will apportion you si...How to Crop Image before Upload using Cropper Js in Laravel 7.x
Hi Guys, In this tutorial,I will lear...