Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Accordion Menu using jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 252
    Comment on it

    Accordion Menu are like the dropdown menu with some effects of animation. It has some top menu and dropdown list inside that menu and some other top menu and another dropdown list inside this menu.

    When we click on the first top menu the dropdown list will show inside that menu but when we click on the second top menu the dropdown list of the first top menu will automatically closes.

    It uses some jquery function and css styling.

    Following example will show how to create it:

    HTML code:

    <ul id="accordionSection">
        <li><div>Fruits</div>
            <ul>
                <li><a href="#">Apple</a></li>
                <li><a href="#">Orange</a></li>
                <li><a href="#">Banana</a></li>
            </ul>
        </li>
        <li><div>Programming</div>
            <ul>
                <li><a href="#">Java</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">AngularJS</a></li>
            </ul>
        </li>
        <li><div>Web</div>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">Javascript</a></li>
            </ul>
        </li>
    </ul>
    

    CSS code:

    #accordionSection {
        list-style: none;
        padding: 0 0 0 0;
        width: 170px;
    }
    #accordionSection ul{
        display: none;
        list-style: none;
        padding: 0 0 0 0;
    }
    #accordionSection ul li {
        font-weight: normal;
        cursor: auto;
        background-color: #fff;
        padding: 0 0 0 7px;
    }
    #accordionSection a {
        text-decoration: none;
    }
    #accordionSection a:hover {
        text-decoration: underline;
    }
    

    JQuery code:

    $("#accordionSection > li > div").click(function(){
    
        if(false == $(this).next().is(':visible')) {
            $('#accordionSection ul').slideUp(300);
        }
        $(this).next().slideToggle(300);
    });
    
    $('#accordionSection ul:eq(0)').show();
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: