Introduction
In this quick article, you will learn how to apply a slide in a DIV tag using jQuery. We will first look at the animated image (working example) and then the code.
![image001.gif]()
Now look at the code.
jQuery Code
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var $VarAbout = $('#About');
$('#Title').click(function () {
$VarAbout.slideToggle('slow');
});
});
</script>
We already discussed the concepts used above in earlier posts; read the previous posts if you do notunderstand.
ASPX Code (Body)
<body>
<div style="width: 300px; text-align:justify; padding:1px; border:1px solid #CCCCCC; font-family:Verdana; font-size:14px; color:#808080;">
<div id="Title" style="background-color:#CCCCCC; padding:5px; cursor: pointer;">
<b>About Visual Studio</b>
</div>
<div id="About" style="padding:5px;">
Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It is used to develop console and graphical user interface applications along with Windows Forms applications, web sites, web applications, and web services.
</div>
</div>
</body>
Very simply, there is nothing new here; download the attached project here and try it yourself.