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:
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.
If you named your div something other than "myAccordion", put that in place of the "myAccordion" (that follows the "#") in the code.
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
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
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
Next, let's make all the subsections load closed:
Last, let's change the height as sections load.