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.
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.
<!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>
Apply some style to Accordion Menu using 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; }