Create Simplest Accordion Menu using jQuery

[ad name=”AD_INBETWEEN_POST”] Let us create a simple Accordion Menu using jQuery. Accordion Menu are the menu with some animation effect. It has few top line menu items which when clicked toggles to open sub menu options. When another top level menu is selected, other open menu will automatically collapse and save useful screen area. We will use jQuery effects to animate the accordion menu. jQuery provides Fade In/Fade Out effect, but accordion menu looks more realistic if we use Slide In / Slide Out effect.
Related: 20 jQuery Tips & Tricks

Step 1: Create HTML for your Menu

First we will create HTML for displaying out Menu. We will use List in HTML to render the menu and then we will use CSS to apply some style. Following will be our Menu code:

<ul id="accordion">
			<li><a href="#">Golf</a></li>
			<li><a href="#">Cricket</a></li>
			<li><a href="#">Football</a></li>
			<li><a href="#">iPhone</a></li>
			<li><a href="#">Facebook</a></li>
			<li><a href="#">Twitter</a></li>
			<li><a href="#">Obama</a></li>
			<li><a href="#">Iran Election</a></li>
			<li><a href="#">Health Care</a></li>

If you check the HTML page now it should look something like:

Step 2: Apply some style to your Menu using CSS

Lets apply some stylesheet to our menu. Copy following CSS code in your HTML file:

#accordion {
	list-style: none;
	padding: 0 0 0 0;
	width: 170px;
#accordion div {
	display: block;
	background-color: #FF9927;
	font-weight: bold;
	margin: 1px;
	cursor: pointer;
	padding: 5 5 5 7px;
	list-style: circle;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
#accordion ul {
	list-style: none;
	padding: 0 0 0 0;
#accordion ul{
	display: none;
#accordion ul li {
	font-weight: normal;
	cursor: auto;
	background-color: #fff;
	padding: 0 0 0 7px;
#accordion a {
	text-decoration: none;
#accordion a:hover {
	text-decoration: underline;

Note that in above CSS code, we have applied Round Corner CSS to our menu to improve the look. Although this technique works with all the modern web browser, but it will not work with Internet Explorer. If we want to change the look n feel for internet explorer, we may want to include IE-Specific stylesheet to our HTML page.
Once we apply the stylesheet, our menu will look like:

Step 3: Give life to your Menu using jQuery

So our basic skeleton is complete. We have used HTML code to display the Accordion menu content and then have applied CSS stylesheet to improve the usability. Let us add life to this accordion menu using jQuery. Copy following jQuery code to the HTML page:

$("#accordion > li > div").click(function(){

	if(false == $(this).next().is(':visible')) {
		$('#accordion ul').slideUp(300);

$('#accordion ul:eq(0)').show();

If you notice the above code, we have made the first menu item in accordion menu visible.

$('#accordion ul:eq(0)').show();

To make a menu item visible by default, just add its index value to the above code. For example to display 1st menu item we added eq(0) in above code.

Online Demo

No article is complete without an online demo. Here is the online demo for Accordion Menu.



Get our Articles via Email. Enter your email address.

You may also like...


  1. Nilesh says:

    Thanks, it work Gr8 for me

  2. Larry says:

    Hi, thanks for the tip – the accordian works, but my entire screen scrolls, when an item in my menu is clicked. Please tell me how I can prevent this.

    Thanks in advance.

  3. more says:

    I am really thankful to the owner of this web site who
    has shared this impressive article at here.

  4. rick says:

    It works fantastic… it’s a great tutorial BUT — It won’t validate in HTML Validator.

    The error is in the layout of my menu
    “Element ul not allowed as child of element ul in this context. ”

    Any advice?

  5. Sasha says:

    Thanks, but this is not valid because if you watch source you will find:


    HTML want

    <li>.first level..
         <li> level</li>

    Thanks, and sorry for this comment.

  6. Kelvin Yip says:

    Great tutorial but I have one question. I want to make it so no menu items show when the page first loads. I took out this line:

    $(‘#accordion ul:eq(0)’).show();

    but the first menu item still shows by default. Can you help me please?

  7. nishant says:

    this accordion is stupid, because it will not work an li does not have any ul. or subcategory.

  8. Shika93 says:

    Nice work! Can I keep open categories when I click on another one? Because like this, every time you click on a closed category when another one is open, that one is closed.

  9. Dulce Maria says:

    I love your work but I have a question as to the title of the main menus are at the center

  10. Silvia says:

    Hello everyone,
    I’ve a problem with the menu in firefox.
    This is how I see it:
    Please anyone know why?
    The menu is perfect in Chrome and IE.
    Thank you!

Leave a Reply

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