JavaScript Code


jQuery – Slide down effect on elements



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>


copyright @2023