Slide up HTML Element(s) using jQuery
Selected some HTML elements in the document, apply slide up effect on them using jQuery.
Solution
To make slide up effect on the selected HTML elements using jQuery, call slideUp() function on the selected elements.
For example, the syntax to slide up all paragraphs in the document is
$("p").slideUp();Programs
1. Slide up all paragraphs in the document.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
function myAction() {
$("p").slideUp();
}
</script>
</head>
<body>
<button onclick="myAction()">Slide up paragraphs</button>
<p>This is a paragraph.</p>
</body>
</html>2. Slide down div#myDiv element in the document.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
function myAction() {
$("div#myDiv").slideUp();
}
</script>
</head>
<body>
<button onclick="myAction()">Slide up div</button><br>
<div id="myDiv" style="width:200px;height:200px;background:yellow;">jQuery</div><br>
</body>
</html>