jQuery - Toggle between Slide up and Slide down effect for element(s)

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>

JavaScript Code