Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to use slideToggle() Method in jQuery ?

    @sujit.singh
    Recommendations Offline Message

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 379
    Comment on it

    Welcome to findnerd, today we are going to discuss on slideToggle() method in jQuery.

    Firstly let know what use of slideToggle() method ?

    The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.

    syntex of slideToggle() method

    1. $(selector).slideToggle(speed,callback);

    There are tow optional parametr in slideToggle() method
    1-speed:-It can take values: "slow", "fast", or milliseconds.
    2-callback:- This parameter is a function to be executed after the sliding completes.

    You can take reference of bellow example:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.    <!--  here call the jquery library -->
    5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    6. <script> 
    7. $(document).ready(function(){
    8.     $("#stable").click(function(){
    9.         $("#move").slideToggle("slow");//here call slideToggle() and pass paramenter to execute
    10.     });
    11. });
    12. </script>
    13. <style> 
    14. #move, #stable {
    15.   /*here write css of text and background color*/
    16.     padding: 10px;
    17.     text-align: center;
    18.     width:220px;
    19.     background-color: #7FFFD4;
    20.     border: solid 1px #c3c3c3;
    21. }
    22.  
    23. #move {
    24.    /*define padding of move id*/
    25.     width:220px;
    26.     padding: 10px;
    27.     display: none;
    28. }
    29. </style>
    30. </head>
    31. <body>
    32.  
    33. <div id="stable">Click here to down or up</div>
    34. <div id="move">Hello it is working</div>
    35.  
    36. </body>
    37. </html>
    JQuery slideToggle()
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: