Now I will share how to make slide up and down (toggle slide) using jquery.
And this is for the demo, check it out :
- Category
List Category 1
List Category 2
List Category 3
Ok, Let's take look for the code:
I just use a jquery script (jquery-1.6.1.min.js) and a simple script to call toggle jquery
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$(".block-t-content").hide(); just active this if u want hide for default
$("#bywebs").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false;
});
});
</script>
This is my css code:
<style type="text/css">
#content {
border:1px solid #c5c5c5;
width:200px;
margin:0px 5px;
border-radius:4px;
}
#main {
background:#c5c5c5;
}
</style>
And the last is my html code :
<div id="content"> <div id="bywebs"> <div id="main">- Category</div> </div> <div class="block-t-content"> <div class="block"> <div>List Category 1</div> <div>List Category 2</div> <div>List Category 3</div> </div> </div> </div>
Finished!!That's all.
For the complete file, you can download in this link 'Download Toggle slide'
Hope it useful for all, if you have any question, you can write your comment below :)
Good Luck :)
No comments:
Post a Comment