Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How slideDown() function works in jQuery event handler?
The JavaScript library "jQuery" is regarded as the most effective lightweight JavaScript library. Based on the built-in methods, it encapsulates several lines of JavaScript code to carry out a given functionality. A single line of code can easily be used to call these methods. While doing the necessary operation, it shortens the code.
The sliding effect is one of the more useful animation-designing methods among the many Effect-creating techniques that are available with jQuery. Let’s dive into the article to learn about the slideDown()function in jQuery.
slideDown() in jQuery
A sliding effect can be produced with the slideDown() method by making the matching element visible while sliding. It operates on elements that are hidden using jQuery methods and the CSS display:none property.
If an element has been hidden using the visibility:hidden property, this function cannot be used to show it.
Syntax
Following is the syntax for slideDown()
$(selector).slideDown(speed,easing,callback)
Example
In the following example, we are going to reveal the hidden element using the slideDown() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
h1 {
color: #DE3163;
font-family: verdana;
}
body {
background-color: #D5F5E3;
height:100px;
}
</style>
</head>
<body>
<h1 style="display:none"> TUTORIALSPOINT </h1>
<button class="tutorial"> Click </button>
<script>
$(document).ready(function() {
$(".tutorial").click(function() {
$("h1").slideDown();
});
});
</script>
</body>
</html>
When we execute the above script, the output window will pop up, displaying the click button on the webpage. When the user clicks the button, the event gets triggered and displays the text that was hidden.
Example
Let’s consider another example where we are going to place the image in the div click event and run the slideDown() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #D6EAF8;
font-family: verdana;
height:100px;
}
#tutorial {
text-align: center;
padding: 1px;
border: 1px solid #5B2C6F;
color: #DE3163;
}
#tp {
padding: 6px;
border: 1px solid #5B2C6F;
height: auto;
display: none;
}
</style>
</head>
<body>
<div id="tutorial"> CLICK </div>
<div id="tp">
<img src="https://www.tutorialspoint.com/cg/images/logo.png">
<img>
</div>
<script>
$(document).ready(function() {
$('#tutorial').click(function() {
$('#tp').slideDown('fast');
})
});
</script>
</body>
</html>
On running the above script, it will generate an output consisting of div text displayed on the webpage. When the user clicks on the text, the event gets triggered and displays the hidden image on the webpage.
9 Views
