slideToggle

Syntax

.slideToggle([duration][, callback])

Parameters

duration (optional): A string or number determining how long the animation will run
callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

Display or hide the matched elements with a sliding motion.

Durations are given in milliseconds; higher values indicate slower animations.

The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete.

Examples

Slide animation

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();
  });
    </script>
 <style>
  div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
  </style>

  </head>
  <body>
  <div></div>
  <div id="mover"></div>
  <div></div>
  </body>
</html>

Click to view the demo

Slide toggle and function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();

  });
    </script>
 <style>
  div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
  </style>

  </head>
  <body>
  <div></div>
  <div id="mover"></div>
  <div></div>
</body>
</html>

Click to view the demo

Slide toggle button

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).slideToggle();
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Slide toggle callback

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).slideToggle("slow",function () {
                     alert("done");
                  });
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Fast slide toggle

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).slideToggle("fast");
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Slide toggle in milliseconds

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).slideToggle(2000);
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Slide toggle slow

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).slideToggle("slow");
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo