Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

Exactly How to Create a Custom jQuery Accordion

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I'll show you how to build a custom accordion that is more "bandwidth efficient".

Download the attachment from the sidebar to take a look.

That seems like a lot for just one simple accordion. Especially when you add in the normal jQuery script, which is 18kb minified and Gzipped. So instead of increasing your page load time with the extra unneeded functionality, why not create something from scratch?

I also think that writing things from scratch really gives you a much better understand of how to use jQuery effectively, without always turning to use someone else’s code.

So the plan for this tutorial is to show create an accordion using the jQuery UI function, then create one using some custom coding. Let’s use a blog sidebar as an example.

The Markup

The markup is very simple, just a list item for each section in the accordion:

The CSS

We are going to add some very basic styling so that the accordion looks more presentable. Since this tutorial is mainly focused on the JavaScript, I am going to run through what we are doing with the CSS quickly.

Since I always start from my own simple framework stylesheet, I’m going to use it here too:

Next, I am going to remove the margin and list-style from the accordion unordered list and the descendant lists and add a bottom border to the accordion unordered list (you will see why it is only a bottom border shortly).

Then, I am going to add a border around each accordion section, except the bottom border. Also, I am going to remove the border from list items that are descendants of the accordion section and add only a bottom border. If it is the last child of a descendant unordered list, I am going to remove the bottom border. Yes, I know this will not work in IE, but it’s not essential.

Next, I am going to style the main link that will toggle the accordion so that they stand out more:

Finally, I am just going to do some basic styling on the sub lists of the accordion so that they look a little nicer:

Let’s take a look at where we are so far. This is also what the accordion will look like when we are using the jQuery UI Accordion and JavaScript is disabled.

Accordion Markup

It looks like we will need to add some additional CSS for IE6 to account for the whitespace bug:

The jQuery UI Accordion

jQuery UI Home Page

Now that we’ve got all the markup and styling complete, it is very simple to implement the jQuery UI accordion. First, we just need to include jQuery and our jQuery UI script.

Then, we need to initialize the accordion on our unordered list with an id of accordion:

And there you have it, a working accordion.

Working Accordion

To make the currently open accordion item stand out more, I added a little extra CSS:

The class name of ui-accordion-selected is automatically added to the current accordion section.

Our Custom jQuery Accordion

Now that we have done the jQuery UI accordion, it’s time to create our own. One thing that I don’t necessarily like about the jQuery UI version is the way it displays when JavaScript is disabled. I would prefer to have it so that only one section is open at a time.

To accomplish this, I am going to add in a little PHP. You could easily accomplish this with any programming language as well.

The idea behind this is that we are going to pass a variable in the URL, and if the variable coincides with each section, we assign a class of current to that section. It is much easier to see this in code, so have a look:

You should also notice that I changed the url of each of the links the toggle the accordion sections to match up with the if statement for the section. So basically, if JavaScript is disabled, you will be taken to a new page with that section open.

We also need to remove the jQuery UI accordion script, and include our own:

Additional CSS

With this slight change to the markup, we need to add in a little additional CSS. We no longer have the ui-accordion-selected class being assigned to the list items; it is now a class of current. We also have to account for this class name change in the on state for the accordion:

So what we want to do is hide all of the unordered lists, unless they are a descendant of the list item with a class of current. I have also added a body id to this demo page so that we can use the same stylesheet for both examples.

The Custom JavaScript

First, we want to execute the script once the document is loaded, so we start with this:

We want the accordion to function when the heading links are clicked, but we don’t want to leave the page so we need to make sure and return false:

Next, I don’t like the outline that shows up around the links when they are clicked, so I set that to none:

There are two different cases for this script.

  1. The link being clicked is the section that is already open.
  2. The link being clicked is not the section that is already open.

The First Case

This is not functionality that the jQuery UI version has, but I think a user should be able to close all sections if they want. If the link clicked has a parent that has a class of current, we want to slide up the unordered list and remove the class of current.

Another thing that bugs me about the jQuery UI version, is that you can scroll the accordion so it is almost out of view, click it, and then the interaction happens above what you can see. Scroll down on the jQuery UI example and give it a try.

So my solution is to use this wonderful little script called jQuery ScrollTo. It is a very small script that adds smooth page scrolling.

Let’s add that to the head of the document before our accordion script:

When the section scrolls up, I want to scroll the window to the top of the accordion:

The first parameter of the function is the target to scroll to, and the second is the amount of time it should take.

The Second Case

This case occurs when the section that is clicking is not currently open. So the first thing we want to do is hide the currently open section and remove the class of current (this piece of the code is very similar to the first case):

Next, we want to open the section we clicked and add the class of current:

Finally, let’s scroll the window to the top of the accordion, just like we did in the first case:

That’s it. Seriously. Did you think creating an accordion could be that simple?

Conclusion

Now, let’s compare the JavaScript file sizes using the Net tab in Firebug.

Firebug

In the jQuery UI example, the JavaScript files total about 73 kb. In our custom example, with the additional scrolling of the window, the JavaScript files total about 57 kb. Now, that may not seem like much, but imagine if you have a very high traffic site. That could be a lot of bytes saved. Plus, now you understand more about jQuery.

Now go out and write your own jQuery.

Advertisement