Toggle between Slide up and Slide down effects using jQuery
Selected some HTML elements in the document, toggle between slide up and slide down effects for the elements using jQuery.
Solution
To toggle between slide up and slide down effects for selected HTML elements using jQuery, call slideToggle() function on the selected elements.
For example, the syntax to toggle between slide up and slide down for paragraphs in the document is
$("p").slideToggle();
Programs
1. Toggle between slide up and slide down for 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").slideToggle();
}
</script>
</head>
<body>
<button onclick="myAction()">Toggle slide up/down</button>
<p>This is a paragraph.</p>
</body>
</html>
2. Toggle between slide up and slide down effects for div element with id myDiv.
<!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").slideToggle();
}
</script>
</head>
<body>
<button onclick="myAction()">Toggle slide up/down</button>
<div id="myDiv" style="width:200px;height:200px;background:yellow;">jQuery</div>
</body>
</html>