Information Computing and Technology Services

Accordion Menu

One task that jQuery makes very easy is creating an accordion effect. To do this, we will use the jQuery UI extension library. This is useful if you have a long section of text that is broken up into subsections. By using an accordion, you only display one subsection at a time, but all the other text is available to read at any time. So, for example, on this sample page, there is a long string of information about Piratedrive, broken up in to seven subsections (General Information, Personal Piratedrive, etc.). So to make the page shorter, I'm going to put the text into an accordion. As you will see, this is very easy to do - in fact, I would say that creating the HTML structure is harder than the actual JavaScript in this case.

HTML Content

First, the content has to be formatted so that it can be converted easily. The jQuery UI library requires that the page content be formatted something like this: 

  1. [html]
  2. <h3><a href="#">Subsection One Title</a></h3>
  3. <div>
  4. Subsection One Content. Can be text, image, links, anything you want.
  5. The content can be multiple paragraphs and contain any html tags that you want.
  6. </div>
  7. <h3><a hre="#">Subsection Two Twitle</a></h3>
  8. <div>

The links (a href="#") are required, because they will be the triggers that cause the subsections to open. The subsection headings do not actually have to be h3's, but that is the default, so for the tutorial that is what I'll use. I'll post a link to the documentation so if you want to do something more advanced you can. So, for step one of the tutorial, I've set up the sample page linked above with the content in that format. 

The other next step is that all the subsections have to be wrapped in a div tag with an id that we will use to identify it. I'm going to call this one "myAccordion", just to make it easy to see what I want it to be converted into, but you can name it any valid name. 

  1.  [html]
  2. <div id="myAccordion">
  3. <h3><a href="#">Subsection One Title</a></h3>
  4. <div>
  5. Subsection One Content. Can be text, image, links, anything you want. The content can be 
  6. multiple paragraphs and contain any html tags that you want.
  7. </div>
  8. <h3><a href="#">Subsection Two Title</a></h3>
  9. <div>
  10. Subsection Two Content. Again, can be text, image, links, anything you want
  11. </div>
  12. </div>
  13. [/html]
Remember, id's are required to be unique on a page, so if you plan on putting two accordions on your page, you cannot name both of them "myAccordion".

Importing jQuery UI

The next step is to include the jQuery UI library on the page. To do this, you would use the Include JavaScript Custom Element. We have the library stored on our server at http://www.ecu.edu/js/jquery-ui-1.8.13.min.js, so when you put the element on the page, put "/js/jquery-ui-1.8.13.js" (minus the quotes) in the external source text box:

jquery-ui-include

Last Step

And now, there is only one more step to go. You need to add other Include JavaScript Custom Element and put this code in the Script Input box: 

  1. [javascript] $(document).ready(function() { $('#myAccordion').accordion(); }); [/javascript] 

document-Ready

If you named your div something other than "myAccordion", put that in place of the "myAccordion" (that follows the "#") in the code.

Styling

When your page reloads, will should see that the accordion works, as here: http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Two.cfm. As you can see, the style is rather plain, so you can either create your own style sheet, use one of two ECU customized one, located at /css/jquery-ui.css (very purple and gold themed) or http://www.ecu.edu/css/custom-theme/jquery-ui-1.8.2.custom.css (a subtler theme), or some combination of an existing style sheet and your own styles. There is a tutorial here on how to use a style sheet in CommonSpot. 

After applying the purple and gold theme, the page looks like this: http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Three.cfm

Advanced Configuration

There are several advanced configuration options that you set if you dislike the defaults. For example, as you can see, by default the first subsection is active (opened for viewing) and the height of all the subsections is the same (the height of the tallest), and one subsection is open at all times. Let's use the advanced options (found here http://jqueryui.com/demos/accordion/ under Options) to change our accordion so that when the page loads all the tabs are closed, the user can close a subsection by clicking on it while it is open, and to have each subsection only use its own height. 

To do this, we have to edit our code that called the accordion function. Right now it is 

  1. [javascript] $(document).ready(function() { $('#myAccordion').accordion(); }); [/javascript] . 

Within the accordion() function, we are going to change the parameters. First let's make the accordion collapsible, i.e. not required at a subsection is open at all times. We change the code to 

  1. [javascript] $(document).ready(function() { $('#myAccordion').accordion( { collapsible: true } ); }); [/javascript] 

Next, let's make all the subsections load closed: 

  1.  [javascript] $(document).ready(function() { $('#myAccordion').accordion( { collapsible: true, active: false} ); }); [/javascript] 

Last, let's change the height as sections load. 

  1. [javascript] $(document).ready(function() { $('#myAccordion').accordion( { collapsible: true, active: false, autoheight: false } ); }); [/javascript] 
When all completed, the page now looks like this: http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Four.cfm

Need Help?