o Create a JQuery Slide Panel used the following steps..
- First download Jquery.js file and add this file into a folder.
- Now type the following codes in HTML Files.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class="flip">Show/Hide Panel</p>
</body>
</html>
- In above file we create a div. Now we create a css class "div.panel" and give the css code as above.
- Now we create another css class named 'p.flip' which used to flip the div panel in top or bottom. we give the name of this class as 'div.panel, p.flip' means flip to div top or bottom which is clarify by using ',' sign.
- Now we give a Jquery script which is used to flip top or bottom div panel. this script is as follows.
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
This script is used for initialize the panel beacuse in this script we used $(document).ready() command which is used for initializing.
- With this script the web browser toggle the div panel in top or bottom position.
- You can also download the example for use the JQuery Slide Panel.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.