Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Slidedown in jquery example in Jquery functions of JQuery Examples
1412 Views
Hints 
SlideUp() used to hide element with sliding effect towards up direction.SlideDown() used to show element with sliding effect towards down direction.

Example: 1 Explain about slideUp() and slideDown() function.

slideToggle() is combination of slideUp() and slideDown() functions.

Example: 2 Explain about slideToggle() function.
Example: 1 Explain about slideUp() and slideDown() function
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").click(function () {
                $(".two").slideDown();
            });
            $(".three").click(function () {
                $(".two").slideUp();
            });
        });
    </script>
    <style type="text/css">
        .two {
            display: none;
        }
    </style>
</head>

<body>
    <div class="one">Click here to slide down the following element</div>
    <div class="two">Slide Up/Slide Down</div>
    <div class="three">Click here to slide up the following element</div>
</body>

</html>
Example: 1 Demo 
Example: 2 Explain about slideToggle() function
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").click(function () {
                $(".two").slideToggle();
            });
        });
    </script>
    <style type="text/css">
        .two {
            display: none;
        }
    </style>
</head>

<body>
    <div class="one">Click here to slide up and slide down the following element</div>
    <div class="two">Slide Up/Slide Down</div>
</body>

</html>
Example: 2 Demo 
Next Topics
Next lessons of current book.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details