Slide down HTML Element(s) using jQuery
Selected some HTML elements in the document that are hidden, apply slide down effect on them using jQuery.
Solution
To make slide down effect on the selected hidden HTML elements using jQuery, call slideDown() function on the selected elements.
For example, the syntax to slide down all hidden paragraphs in the document is
$("p").slideDown();Programs
1. Slide down all hidden 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").slideDown();
}
</script>
</head>
<body>
<button onclick="myAction()">Slide down paragraphs</button>
<p hidden>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").slideDown();
}
</script>
</head>
<body>
<button onclick="myAction()">Slide down div</button><br>
<div id="myDiv" style="width:200px;height:200px;background:yellow;" hidden>jQuery</div><br>
</body>
</html>