jQuery Slide() Method function


jquery jQuery Slide() Method function One Button Click Slide Up And Down

How to slide the HTML content using jQuery function?

To slide the HTML content using jQuery we will use the following three jQuery functions.

  1. slideUp()
  2. slideDown()
  3. slideToggle()

Syntax of jQuery Slide functions

$("TagSelector").slideUp('Speed Value in MilliSecond','Callback Function'); // Syntax $("#mydiv").slideDown('1000' , 'myfunction'); //Example $("TagSelector").slideDown('Speed Value in MilliSecond','Callback Function'); // Syntax $("#mydiv").slideUp('slow' , 'myAlertfunction'); //Example $("TagSelector").slideToggle('Speed Value in MilliSecond','Callback Function'); // Syntax $("#mydiv").slideToggle('fast'); //Example Note ! Speed value and call back function name parameters are optional. Let's discuss these jQuery functions one by one.

1- jQuery function slideUp()

As first the HTML section will already hide then it will slide down and will show. So we first assign the div style attribute display="none".

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: none;" id="mydiv1"> You are at the CodingPK jQuery Slide functions tutorial. Just follow the Chapter Sequence to learn jQuery programming. </div> <button id="mybutton1">Click Me to Slide Down the Div</button> <script type="text/javascript"> $("#mybutton1").click(function(){ $("#mydiv1").slideDown("slow"); }); </script>

Output of jQuery slideDown()

2- jQuery function slideUp()

Using the slideUp() function the HTML section will slide up , it mean it will hide with animation up and its display will set to 'none'.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: none;" id="mydiv2"> You are at the CodingPK jQuery Slide Up functions tutorial. Just follow the Chapter Sequence to learn jQuery programming. </div> <button id="mybutton2">Click Me to Slide Up and Hide the Div</button> <script type="text/javascript"> $("#mybutton2").click(function(){ $("#mydiv2").slideUp("slow"); }); </script>

Output of jQuery slideUp()

You are at the CodingPK jQuery Slide Up functions tutorial. Just follow the Chapter Sequence to learn jQuery programming.

3- jQuery function slideToggle()

Using the slideToggle() function the HTML section will slide up and down, it mean it will hide and show with respective animation up and down its display will turn on and off.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: none;" id="mydiv3"> You are at the CodingPK jQuery Slide Toggle functions tutorial. Just follow the Chapter Sequence to learn jQuery programming. </div> <button id="mybutton3">Click Me to Toggle the Div</button> <script type="text/javascript"> $("#mybutton3").click(function(){ $("#mydiv3").slideToggle("8000"); }); </script>

Output of jQuery slideToggle()

You are at the CodingPK jQuery Slide Up functions tutorial. Just follow the Chapter Sequence to learn jQuery programming.
jquery One Button Click Slide Up And Down Chapter Next »