Tuesday, December 28, 2010

Toggle Menu Jquery




 HTML

<div class="right-menu" id="right-menu">
        <div class="right-basicmenu">
            <a href="javascript:void(0);">Adventure Tours</a>
            <div class="right-submenu">
                <ul class="style">
                    <li><a href="javascript:void(0)">*Fishing</a></li>
                    <li><a href="javascript:void(0)" class="submenusel">*Mountaineerig</a></li>
                    <li><a href="javascript:void(0)">*Walking</a></li>
                    <li><a href="javascript:void(0)">*Horse riding</a></li>
                    <li><a href="javascript:void(0)">*Camel riding</a></li>
                    <li><a href="javascript:void(0)">*Biking</a></li>
                    <li><a href="javascript:void(0)">*Film making</a></li>
                    <li><a href="javascript:void(0)">*Jeep sarari</a></li>
                </ul>
            </div>
        </div>

        <div class="right-basicmenu">
            <a href="javascript:void(0);">Culture Tours</a>
            <div class="right-submenu">
                <ul class="style">
                    <li><a href="javascript:void(0)">*Fishing</a></li>
                    <li><a href="javascript:void(0)">*Mountaineerig</a></li>
                </ul>
            </div>
        </div>
    </div>

Javascript

<script type="text/javascript">
        function clickon(){   
            var $p = $(this).parent();
            var iam = false;
            $('#right-menu .right-basicmenu').filter(function(){
                return $(this).data("clicked");
            }).each(function () {   
                if ($(this).data("clicked")) {
                    $(this).data("clicked",false);
                    $($(this).children().get(1)).slideUp("slow");
                    iam = $(this).data("index")==$p.data("index");
                }
            });
            if (!iam) {
                $p.data("clicked",!$p.data("clicked"));
                if($p.data("clicked"))
                    $(this).next().slideDown("slow");
                else
                    $(this).next().slideUp("slow");
            }
        }       
        $('#right-menu .right-basicmenu').each(function(i){
            $(this).data("clicked",false);
            $(this).data("index",i);
            var $a = $($(this).children().get(0));           
            $a.click(clickon);
            $a.next().slideUp("fast");
        });           
    </script>

No comments:

Post a Comment