Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use slideToggle() Method in jQuery ?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 348
    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

    $(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:

    <!DOCTYPE html>
    <html>
    <head>
       <!--  here call the jquery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script> 
    $(document).ready(function(){
        $("#stable").click(function(){
            $("#move").slideToggle("slow");//here call slideToggle() and pass paramenter to execute
        });
    });
    </script>
    <style> 
    #move, #stable {
      /*here write css of text and background color*/
        padding: 10px;
        text-align: center;
        width:220px;
        background-color: #7FFFD4;
        border: solid 1px #c3c3c3;
    }
    
    #move {
       /*define padding of move id*/
        width:220px;
        padding: 10px;
        display: none;
    }
    </style>
    </head>
    <body>
    
    <div id="stable">Click here to down or up</div>
    <div id="move">Hello it is working</div>
    
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: