Applying Slide in DIV using jQuery
Introduction
In this quick post, you will learn how to apply slide
in DIV tag using jQuery. We will first look at the animated image (working
example) and then will see the code.
Now look at the codes.
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 talked on the concepts used above in earlier
posts, read previous posts if you are not getting.
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>
Comments
Post a Comment