This is a html code for creating button and image.
For Slide Down
<html>
<head><title>Slide Down with jquery example</title></head>
<body>
<img id="image" src="img/school.png" height="400px" width="500px" style="display:none"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slidedown.js"></script>
</body>
</html>
//slidedown.js
$('#btn').click(function(){
$('#image').slideDown('slow');
});
For Slide Up
<html>
<head><title>SlideUp with jquery example</title></head>
<body>
<p><input type="button" id="btn" value="slide Up"></p>
<img id="image" src="img/school.png" height="400px" width="500px" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slideup.js"></script>
</body>
</html>
//slideup.js
$('#btn').click(function(){
$('#image').slideUp('slow');
});
For SlideToggle
<html>
<head><title>slidetoggle with jquery example</title></head>
<body>
<p><input type="button" id="btn" value="slide Toggle"></p>
<img id="image" src="img/school.png" height="400px" width="500px"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slidetoggle.js"></script>
</body>
</html>
//slidetoggle.js
$('#btn').click(function(){
$('#image').slideToggle('slow');
});
 |
| fig : output of above slidetoggle code |
No comments:
Post a Comment