The slideUp(), slideDown(), and slideToggle() methods are used to create sliding effects on elements.
They are built-in functions and can be used easily.
Used to gradually hide selected elements by decreasing their height.
EDUCATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery SlideUp Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p {
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<button id="slideUpBtn">Slide Up Paragraph</button>
<p id="myParagraph">This is a paragraph.</p>
<script>
$(document).ready(function(){
// Slide up the paragraph on button click
$("#slideUpBtn").click(function(){
$("#myParagraph").slideUp();
});
});
</script>
</body>
</html>
Used to gradually display selected elements by increasing their height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery SlideDown Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p {
font-size: 18px;
color: blue;
display: none; /* Initially hide the paragraph */
}
</style>
</head>
<body>
<button id="slideDownBtn">Slide Down Paragraph</button>
<p id="myParagraph">This is a paragraph.</p>
<script>
$(document).ready(function(){
// Slide down the paragraph on button click
$("#slideDownBtn").click(function(){
$("#myParagraph").slideDown();
});
});
</script>
</body>
</html>
Used to toggle between sliding down and sliding up of selected elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery SlideToggle Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p {
font-size: 18px;
color: green;
}
</style>
</head>
<body>
<button id="slideToggleBtn">Slide Toggle Paragraph</button>
<p id="myParagraph">This is a paragraph.</p>
<script>
$(document).ready(function(){
// Toggle between sliding down and sliding up the paragraph on button click
$("#slideToggleBtn").click(function(){
$("#myParagraph").slideToggle();
});
});
</script>
</body>
</html>
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.
