The simplest jQuery Accordion ever!

Accordion: what's that?

Accordion, as we all know is an ancient musical instruments used to play folk music in some countries like Italy, Germany...

Okay, I was joking, I like to play. Let's restart.

We all know what an accordion is: an amazing, comfortable way to display a lot of options (usually, menu items) in our html pages without cluttering them.

Here's what Wikipedia says:

The graphical control element accordion is a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "stretched" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one items expanded at a time, depending on the configuration.
The term stems from the musical accordion in which sections of the bellows can be expanded by pulling outward.

An accordion menu lets us to organize our menu items in category and subcategories without any limit, putyting tenths of links in a very small space.

What are you talking about?

Okay, I hear you to say, but why are you telling us all that? We know already...

Well, I know you know and you should know I know you know. The fact is that many peoples , when it comes to play to build an accordion menu start to look for a jQuery plugin: there are a tons around but what I want to show you is that you don't need any plugin to build a fully functional, infinitely extensible Accordion menu: just 11 lines of jQuery (parenthesis included)!

So let me show you a working example of the accordion menu we're going to build together:

Accordion example

Accordion test

The simplest accordion menu ever!

Let's start with our Accordion. It will have a couple of great features:

  1. it can be extended as we need without modifying the underlying jQuery code: we can add an infinite number of submenus and items just using a couple of css classes;
  2. every time we'll click on a menu item to show its children we want automatically close any other open menu regardless its level (except of course the one we are in).

The basic markup

So, look at the following markup for our menu. We'll use the element nav to wrap the series of unordered lists that will build menus and submenus. We give to the main list the id "mg-accordion" (you know, mg stays for Marco Gasi 😉 ) Then we'll use class "dropdown" to mark all li elements which hold a submenu and the class "submenu" to mark the ul element which represent the submenu hold by the dropdown list item. In the following snippet you can see highlighted all the lines where these classes are used:

Keep in mind you can add as many submenus as you need without change a single comma of the jquery code.

Go with jQuery

What we want to do is to convert this simple list in a fully working Accordion menu.

We want three things:

  1. clicking on an item will open its submenu and clicking that item again will hide the submenu
  2. clicking on an item will hide any visible submenu before to show the submenu child of the clicked item
  3. this mechanism must work respect any level of nested submenus (in the sample above we have three)

Let's go to jQuery. First, we need to embed jQuery:

Is document ready?

Now we have to attach an event handler to all anchor elements for the list items which have a submenu. We do this in two steps just to make it a bit more clear:

And now the accordion code:

If you want allow more than one submenu be visible at the same time you can just delete a few lines of code:

Putting it all together!

That's all. You can style it as you prefer and you have no limit but your fantasy! 🙂

Putting it all together we get the following code: this is exactly the same code you can see running above in my small accordion menu example.

As you can see, I have added some code to put a + (plus) and - (minus) signs near to open and closed submenu and to change them accordingly to the user choices. See the comments in the code to learn more about this.

That's all, people. Hope this help 🙂

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.