Create Simplest Accordion Menu using jQuery

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
accordion-menu-example

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><div>Sports</div>
		<ul>
			<li><a href="#">Golf</a></li>
			<li><a href="#">Cricket</a></li>
			<li><a href="#">Football</a></li>
		</ul>
	</li>
	<li><div>Technology</div>
		<ul>
			<li><a href="#">iPhone</a></li>
			<li><a href="#">Facebook</a></li>
			<li><a href="#">Twitter</a></li>
		</ul>
	</li>
	<li><div>Latest</div>
		<ul>
			<li><a href="#">Obama</a></li>
			<li><a href="#">Iran Election</a></li>
			<li><a href="#">Health Care</a></li>
		</ul>
	</li>
</ul>

If you check the HTML page now it should look something like:
html-menu-list

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:
accordion-menu-stylesheet

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);
	}
	$(this).next().slideToggle(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.

VIEW DEMO

DOWNLOAD



121 Comments

  • Nilesh 29 March, 2014, 7:58

    Thanks, it work Gr8 for me

  • Larry 7 April, 2014, 19:54

    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.

  • more 13 May, 2014, 1:25

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

  • rick 26 June, 2014, 0:37

    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?
    Thanks,
    Rick

  • Sasha 2 July, 2014, 22:41

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

    <li>....</li>
      <ul>
        <li>...</li>
      </ul>
    <li>...</li>
    

    HTML want

    <li>.first level..
      <ul>
         <li>..next level</li>
      </ul>
    </li>
    

    Thanks, and sorry for this comment.
    Regards.

  • Kelvin Yip 5 July, 2014, 7:29

    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?

  • nishant 22 July, 2014, 6:16

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

Leave a Reply

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

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current day month ye@r *