JQuery Slide

JQuery Slide



Here is snippet of jQuery to slide div control UP and down.

 

image

 

JQuery for Sliding Div up and Down.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" language="javascript">
       var flag = false;
       $("document").ready(function () {

           $("#imgClick").click(function () {

               if (!flag) {

                   $("#sliderDiv").slideUp("slow", function () {

                       $("#imgClick").attr("src", "http://www.clevelandseniors.com/images/misc/down-arrow.jpg");

                   });
                   flag = true;
               }
               else {

                   $("#sliderDiv").slideDown("slow", function () {

                       $("#imgClick").attr("src", "http://www.clevelandseniors.com/images/misc/up-arrow.jpg");

                   });
                   flag = false;
               }
           });

       });
   </script>

 

 

Html Body:

<body>
    <form id="form1" runat="server">
    <div style="height: auto; width: auto; background-color: White;">
        <div id="sliderDiv" style="width: 100%; height: 100px; background-color: Red;">
            This is Control sliding Panel.
        </div>
        <img alt="Click to slide" id="imgClick" src="http://www.clevelandseniors.com/images/misc/up-arrow.jpg"
            style="width: 50px; height: 50px; padding-left: 50%; padding-right: 50%; vertical-align: bottom;" />
    </div>
    </form>
</body>

 

Description:

1. $("#imgClick").click(function () {      inner code goes here        });

     Is used to find image id and attach Click event to it.

2. $("#sliderDiv").slideUp("slow", function () {  call back code goes here    });

     When div slides up, the call back function changes source of the image to indicate slide down image.

     Alternatively you can write something like below code

     $("#sliderDiv").slideUp("slow", xxx);

      function xxx()
     {
         $("#imgClick").attr("src", "http://www.clevelandseniors.com/images/misc/down-arrow.jpg");
     } 

In function xxx, you can do call back action after sliding up the sliderDiv.

Learning JqueryBasics of jqueryJquery Trim StringJQuery Animate Div Height and WidthGoogle JQuery CDNHTML5 Slider control and JavaScriptHow to call function in JQueryJquery Dropdown Selected ValueAsp.net JQuery Calendar ControlHow To Hide Div On Click Using JQueryJQuery Form With Validation

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.