slideUp, slideDown and slideToggle in jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="id=edge">
<link rel="stylesheet" href="css/slideUp_slideDown_SlideToggle.css">
<title>slideUp_slideDown_SlideToggle</title>
</head>
<body>
<h1>slideUp_slideDown_SlideToggle Method</h1>
<div id="box">
<h2>Test Box</h2>
<p>Lorem ipsum <span>dolor sit amet</span> consectetur adipisicing elit. Quibusdam, vitae reprehenderit. Minus,
illum voluptate tenetur asperiores rerum voluptatibus facere a enim velit, voluptatum consequuntur. Dolorem
reiciendis harum mollitia corporis odio?</p>
</div>
<br>
<button id="slideUpBtn">slideUp</button>
<button id="slideDownBtn">slideDown</button>
<button id="slideToggleBtn">slideToggle</button>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#slideUpBtn").click(function () {
// $("#box").slideUp("slow");
$("#box").slideUp(3000, function () {
console.log("Now it is hidden OR slideUp");
}); //In 3000 miliseconds, it will slideUp
});
$("#slideDownBtn").click(function () {
// $("#box").slideDown("slow");
$("#box").slideDown(3000, function () {
console.log("Now it is show OR slideDown");
}); //In 3000 miliseconds, it will slideDown
});
$("#slideToggleBtn").click(function () {
$("#box").slideToggle("fast", function () {
console.log("Now it is Toggle OR slideToggle");
}); //In 3000 miliseconds, it will slideToggle
});
});
</script>
</body>
</html>
Below File is css/slideUp_slideDown_slideToggle.css File.
#box {
background: #90ee90;
padding: 10px;
border: 2px solid #000000;
}
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment