Friday, September 7, 2012

jQuery simple accordion

This is a tutorial on how to make a simple accordion.

jQuery

jQuery(".className ul").not(":first").hide();
jQuery(".className>li>a").hover(function(){
    var hasUl=jQuery(this).next("ul").html();
    if(hasUl!=null){
         if(!jQuery(this).next("ul").is(":visible")){
            jQuery(".className ul").slideUp("slow");
            jQuery(this).next("ul").slideDown("slow");
         }
    }
});

html
<ul class="className">
    <li>
        <a href="#">level 1</a>
        <ul>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>           
        </ul>
    </li>
    <li>
        <a href="#">level 1</a>
        <ul>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>           
        </ul>
    </li>
    <li>
        <a href="#">level 1</a>
        <ul>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>           
        </ul>
    </li>
</ul>

Hope it will help!!!
(i made this one)
jQuery(".ver3 ul").not(":first").hide();
jQuery(".ver3>li>a").hover(function(){
    var hasUl=jQuery(this).next("ul").html();
    if(hasUl!=null){
         if(!jQuery(this).next("ul").is(":visible")){
            jQuery(".ver3 ul").slideUp("slow");
            jQuery(this).next("ul").slideDown("slow");
         }
    }
});
jQuery(".ver3 ul").not(":first").hide();
jQuery(".ver3>li>a").hover(function(){
    var hasUl=jQuery(this).next("ul").html();
    if(hasUl!=null){
         if(!jQuery(this).next("ul").is(":visible")){
            jQuery(".ver3 ul").slideUp("slow");
            jQuery(this).next("ul").slideDown("slow");
         }
    }
});
jQuery(".ver3 ul").not(":first").hide();
jQuery(".ver3>li>a").hover(function(){
    var hasUl=jQuery(this).next("ul").html();
    if(hasUl!=null){
         if(!jQuery(this).next("ul").is(":visible")){
            jQuery(".ver3 ul").slideUp("slow");
            jQuery(this).next("ul").slideDown("slow");
         }
    }
});

1 comment:

  1. Para asa ni imong code bakla? which part sa web magamit ning mananapa?

    ReplyDelete