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();