Here is snippet of jQuery to slide div control UP and down.
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.
Currently rated 5.0 by 1 people
Satalaj
I'm Satalaj.
↑ Grab this Headline Animator
Get notified when a new post is published.