How To Create Simple Accordion Menu

by

This tutorial is about how to create simple accordion menu using html css jquery. This is generally used in FAQ page where you have set of question with answer. Question is shown by default but answer is hidden and displayed when user click on question tab. Accordion menu is used when there is  less space in webpage to display data. Accordion menu gives animation effect and good experience to user.

create simple accordion menu using jquery

I will guide you to create simple accordion menu using jquery step by step. Let’ see snippet.

HTML

Write simple html code to create accordion menu.

 <ul id="accord-menu">

    <li><a href="#">Tutorial</a>
        <ul class="sub">
            <li><a>PHP</a></li>
            <li><a>MySQL</a></li>
            <li><a>jQuery</a></li>
            <li><a>JavaScript</a></li>
            <li><a>AJAX</a></li>
        </ul>
    </li>

    <li><a href="#">Database</a>
        <ul class="sub">
            <li><a>MySQL</a></li>
            <li><a>SQL Lite</a></li>
            <li><a>Oracle</a></li>
        </ul>
    </li>

    <li><a href="#">OOPs</a>
        <ul class="sub">
            <li><a>Class</a></li>
            <li><a>Object</a></li>
        </ul>
    </li>

</ul>

CSS

Write some CSS code to style accordion menu and give some effect.

#accord-menu {
    text-align: center;
    margin: 0 auto;
    width: 450px;

}
#accord-menu li  {
    display: block;
    padding: 10px 15px;
    background: #d96e28;
    text-decoration: none;
    color: #258662;
}

#accord-menu li ul li {
    display: block;
    padding: 10px 15px;
    background: #237171;
    border-top: 1px solid #eee;
    text-decoration: none;
    color: #258662;
}
.sub {
    display: none; 
}

#accord-menu li ul li a {
    color: #fff;
}

jQuery

Now accordion menu is ready, writing jquery script to activate its functionality by onclick event.

$(document).ready(function () {

    $("#accord-menu > li > a").click(function () {

        $("#accord-menu > li > ul").slideUp();         //slideup all ul on click 

        $(this).parent().find(".sub").slideToggle();  //toggle current ul

    });

});

Demo

So , you have seen how to create simple accordion menu using jquery.

Leave a Comment