Do you need a PHP programmer?
Use my services as a freelance PHP programmer by hiring me to do PHP programming on your website project.

I have built many custom PHP applications like project managers, classified ad websites and content management systems. I also work with open source applications such as WordPress, online shopping cart websites like Magento and develop content management systems like Joomla.

Tuesday, April 10, 2012

Slide up down (Toggle Slide) using jquery

Hello everybody,
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