jQuery Accordion Menu

Dec 24, 2014 By Mohammed Imtiyaz

Download Live Demo

Introduction

In this tutorial, we will learn how to create the jQuery Accordion menu in Html. We will create here two jQuery Accordion Menu, one for arabic interface and another for arabic interface using two different css stylesheets.

Demo

English Interface (Left to Right)

Arabic Interface(Right to Left)

Demo
Demo

Step 1

First we need to create Html page for displaying Accordion Menu. We will use the list in Html to render the menu and then we will use css to apply some style.

Html Code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
    <
title>jQuery Accordion</title>
    <
link href="css/jaccordion.css" rel="stylesheet" type="text/css" />
    <
script type="text/javascript" src="js/jquery.min.js"></script>
    <
script type="text/javascript" language="javascript" src="js/jquery.jaccordion.0.1.js"></script>

    <
script type="text/javascript" language="javascript">
       
$("document").ready(function () {
            $("#accordion-ul").jAccordion();
        });
    </
script>

</
head>
<
body>
    <
div id="wrapper">
        <
div class="box">
            <
ul id="accordion-ul">
                <
li class="open">
                    <
p>Vegetables</p>
                    <
ul>
                        <
li><a href="#" title="">Tomato</a></li>
                        <
li><a href="#" title="">Carrot</a></li>
                        <
li><a href="#" title="">Potato</a></li>
                    </
ul>
                </
li>
                <
li>
                    <
p>Fruits</p>
                    <
ul>
                        <
li><a href="#" title="">Apple</a></li>
                        <
li><a href="#" title="">Banana</a></li>
                        <
li><a href="#" title="">Grapes</a></li>
                        <
li><a href="#" title="">Orange</a></li>
                    </
ul>
                </
li>
                <
li>
                    <
p>Dried Fruits</p>
                    <
ul>
                        <
li><a href="#" title="">Almonds</a></li>
                        <
li><a href="#" title="">Cashwes</a></li>
                    </
ul>
                </
li>
            </
ul>
        </
div>
    </
div>

</
body>
</
html>

Step 2

Apply some style to Accordion Menu using CSS

Css

#wrapper{
    padding
:10px 0px 0px 0px;
}

ul.jaccordion
,
ul.jaccordion
ul{
    list-style
: none;
    padding
: 0px 0px 0px 0px;
    margin
: 0px 0px 0px 0px;
    width
: 100px;
    font-family
: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
    font-size
: 13px;
    font-weight
:normal;
    direction
:ltr;
}

ul.jaccordion
li{
    background-color
: #FF6103;
    border-bottom
: 1px solid #fff;
}

ul.jaccordion
li p{
    color
: #fff;
    padding
: 10px 15px 10px 15px;
    margin
: 0px 0px 0px 0px;
    cursor
: pointer;
}

ul.jaccordion
li ul li{
    background-color
: #FFFFF0;
    border-bottom
: 1px solid #F8CEAB;
    padding
: 10px 15px 10px 15px;
}

ul.jaccordion
li ul li a{
    color
: Gray;
    padding
: 10px 15px 10px 10px;
    cursor
:pointer;
    text-decoration
:none;
}

ul.jaccordion
li ul li a:hover{
    color
: Red;
    padding
: 10px 15px 10px 10px;
    cursor
:pointer;
    text-decoration
:none;
}


Post your comment