Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery slideUp slideDown slideToggle Effects Example /Sample

Oct 7, 2012
Introduction

Here I will explain how to implement simple div with 
JQuery slideup, slidedown and slidetoggle effects in asp.net.

Description:
  
In previous posts I explained jQuery fadein fadeout fadeto div example, Best jQuery Drag and Drop Plugins,
Draggable and Resizable example, split the string, add fade in effect to page and many articles relating to JQuery. Now I will explain how implement simple div with slideup, slidedown and slidetoggle effects in JQuery.

To implement slideup, slidedown and slidetoggle effects for div in JavaScript we need to write much code but in JQuery we can achieve this functionality just by simple properties slideup, slidedown and slidetoggle that would be like as shown below


<script type="text/javascript">
$(document).ready(function() {
$('#slideupdiv').slideDown('slow');
$("#slidedowndiv").slideUp('slow');
$("#slidetogglediv").slideToggle('slow');
});
</script>
OR


<script type="text/javascript">
$(document).ready(function() {
$('#slideupdiv').slideDown(2000);
$("#slidedowndiv").slideUp(2000);
$("#slidetogglediv").slideToggle(2000);
});
</script>
If you observe above script I used one div with slideDown, Second div with slideUp and another div with slideToggle properties.

slideDown():  This method display the matched elements with slide down effect

slideUp(): This method hide the matched elements with slide up effect

slideToggle(): This method Display or hide the matched elements with a sliding motion means suppose if matched element displayed it will hide with slide motion effect otherwise if matched element hidden it will display with slidedown effect.

If you want check this code in sample check below code

Example:


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery SlideUp, SlideDown and SlideToggle effects for div Example</title>
<style type="text/css">
.slidediv{
width: 160px; height: 50px; padding: 0.5em;background:#EB5E00;color:#fff
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

</head>
<body>
<form id="form1" runat="server">
<h2> jQuery SlideUp, SlideDown and SlideToggle effects for div Example</h2>
<div id="slideupdiv" class="slidediv">
<b>Click me - SlideUp()</b>
</div><br />
<div id="slidedowndiv"  class="slidediv">
<b>Click me - SlideDown()</b>
</div><br />
<input type="button" id="btnToggle" value="Click To Toggle" />
<div id="slidetogglediv"  class="slidediv">

<b>SlideToggle()</b>
</div><br />
<input type="button" id="btnReset" value="Reset" />
<script type="text/javascript">
// Applying SlideUp effect
$("#slideupdiv").click(function() {
$(this).slideUp(2000);
});
// Applying SlideDown effect
$("#slidedowndiv").click(function() {
$(this).hide().slideDown(2000);
});
// Applying SlideToggle effect
$("#btnToggle").click(function() {
$("#slidetogglediv").slideToggle();
});
// Reset the div's
$('#btnReset').click(function() {
$('#slideupdiv').fadeIn('slow');
$("#slidedowndiv").fadeIn('slow');
$("#slidetogglediv").fadeIn('slow');
})
</script>
</form>
</body>
</html>
Live Demo

To check Live demo click on below div’s

jQuery SlideUp, SlideDown and SlideToggle effects for div Example


Click me - SlideUp()


Click me - SlideDown()


SlideToggle()


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

6 comments :

Naveen said...

Really it is good article bro..

Anonymous said...

Nice job :)

Unknown said...

Thanks a lot for the post! is there a way to do it with the hand cursor style?

birkin said...

First of all, nice job, but I still can't understand div issue!

Avighna Softech said...

Hello Suresh,

I am working with MVC 4 razor. I have a view that is repeating a div using foreach loop. And I have a checkbox in div that is (checkbox) appearing in all the divs(in the repeating area). Now the functionality I nedd is that ..... On checking the checkbox, I want to show a button on that particular div. I am trying it via jQuery, but still I failed. M code is working only for first div... not for other div in that view. If you have any query please let me know.

Please reply me ASAP.

Thanks in advance.

Unknown said...

nice one suresh

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.