Simple JQuery Accordion menu

May 12, 2009

Simple JQuery Accordion menu is a best handy tool to show and hide information as needed. It also feel like a flash menu. I have used them on sites like Content Management System, Marketplace, E-commerce, and some of the Lowest/Highest Unique Bids Auction website. This accordion menu is worked perfectly while I used on these website. So, Now I decided to show how to create jQuery accordion menu which will help to your website too…

How to implement this jQuery accordion style menu:

Step 1: Include jQuery:

For a jQuery beginner the first thing you need to do is to include the jQuery library. This can be done by including the following code in the head of your page:

 Click here  to download latest libray.

Step 2: Create the JavaScript:

Next step you need to create a blank JavaScript file. For the example, this file is called jquery-accordion.js. This file will contain the jQuery code required for the menu. Once you save the file include it in the head of your document with the proper path just after the jQuery library. An example of the JavaScript code to include in this document is shown below:

Step 3: Create the CSS:

Now we need to create a CSS file which will include  in the head of your page. For the example, this file is called style-accordion.css.This file will contain the CSS code for accordion menu:

Step 4: Create the HTML:

Now we need to create the HTML page to manipulate it. For the example, this page is called accordion.html. we will keep the page very, very simple. While page load there is display first UL element menu by default. After that when you click on the any menu then jQuery function will check clickable element is visible , if yes then it will return false otherwise it will display clickable list menu and hide others.The full HTML document also displaying the includes is shown below:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>

<html xmlns=””>


<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Simple JQuery Accordion menu</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

<script src=”jquery-1.2.1.min.js” type=”text/javascript”></script>

<script src=”menu.js” type=”text/javascript”></script>

<!–[if lt IE 8]>

<style type=”text/css”>

li a {display:inline-block;}

li a {display:block;}





<ul id=”menu”>


<a href=”#”>Programming Languages</a>


<li><a href=””>PHP</a></li>

<li><a href=””>Ruby</a></li>

<li><a href=””>Python</a></li>

<li><a href=””>PERL</a></li>

<li><a href=””>Java</a></li>

<li><a href=””>C#</a></li>




<a href=”#”>Content Management System</a>


<li><a href=””>Joomla</a></li>

<li><a href=””>Drupal</a></li>

<li><a href=””>Pligg</a></li>

<li><a href=””>Modxcms</a></li>



<li><a href=””>SKS’s Home (no submenu)</a></li>


<a href=”#”>Web Development Services</a>


<li><a href=””>Content Management System</a></li>

<li><a href=””>E-commerce Website</a></li>

<li><a href=””>Small Business Website</a></li>

<li><a href=””>Lowest Unique Bids Auction</a></li>

<li><a href=””>Highest Unique Bids Auction</a></li>

<li><a href=””>Penny/Live Bids Auction Script</a></li>




<a href=”#”>Search Engines</a>


<li><a href=””>Yahoo!</a></li>

<li><a href=””>Google</a></li>

<li><a href=””></a></li>

<li><a href=””>Live Search</a></li>







Post a Comment

Your email address will not be published. Required fields are marked *


  • Recent Posts

    • Secure Your CodeIgniter Application using CSRF Token

      by admin
      In this tutorial, we will learn how to make our website more secure & protect from CSRF when we are using CodeIgniter web application framework. We thanks CodeIgniter team who giving in built support Cross Site Rquest Forgery (CSRF or XSRF). To enable CSRF protection CodeIgniter Framework will automatically protect forms or AJAX calls from CSRF when […]
    • Multiple Themes in CodeIgniter like WordPress

      by admin
      Create multiple themes and select one of them from backend like wordpress is drawbacks of a framework. Similar CodeIgniter have not an option to select one theme from multiple theme concept but we can re arrange using CodeIgniter template concept. We are going to handle multiple themes in a very simple way, in this example […]
    • How to create REST API in PHP?

      by admin
      REST (Representational State Transfer) is the standard design architecture for developing web services API. It is simple easy to understand and developing client-server relationship API. REST takes advantage of the HTTP request methods to layer itself into the existing HTTP architecture. We can handle GET, PUT, POST, DELETE operations through it. A REST API allows […]
    • Basic security vulnerabilities in php code

      by admin
      Today I have informed PHP programmers of common security mistakes that can be overlooked in PHP scripts. In the beginning programmers fail to understand about the PHP security issues or how to make secure script. The wise programmer knows that the real question is how secure a site is. Here I have focus how to […]
    • Generating CAPTCHA Image Using PHP

      by admin
      The CAPTCHA is a very very useful test to prevent abuse on the websites. When you create a web form like registration, login, contact us, blog comment etc…, We are suffering day by day with unwanted email or web spam abuse. So if you use CAPTCHA on your website forms, this can help in stopping […]
Copyright © 2012-2013 Sujit Shah. .
Tags: PHP Programmer Nepal, Web Developer Nepal, Website Designer, CodeIgniter Developer, Yii Framework, Wordpres, OpenCart, Drupal, Front End Developer, Responsive Developer, Bootstrap, Foundation, Freelance PHP MySql Programmer Nepal, Expert Programmer Nepal, PHP, MySql, LAMP, Linux, Apache, SVN, JavaScript, Ajax, jQuery, HTML, HTML5, CSS, CSS3, XML, SOAP, PSD to XHTML, Responsive Web Design, Web Development, CMS, E-commerce, Classified, Job portal, Travel & tours, Penny Auction, Lowest Unique Bid Auction, Reverse Auction, Price Reveal Auction, Payment Gateway Integration, Nepal, India, Hong Kong, Australia, UK, USA, Singapore, Germany, Canada, Netherlands, New Zealand, Norway, Italy