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