While at the TAE in Boston, I have tried to use the accordion widget «on the spot» to organize my conference notes. I have looked up the Accordion documentation and put the code together. It did not work. After a brief conversation with Richard Worth (thank you, Richard!) it turned out that I did not read well enough into the Accordion’s assumptions on the DOM structure. The documentation touches well on the «standard» cases of using lists, but it was unclear on how to use it with structure based on divs, or other elements.

In case it may someone else, here what I now understand:

Accordions being created on a jQuery object. To avoid visual surprises, each element to be made an accordion should have a set of children elements, which will become the accordion’s items. E.g.:

<div id="my_accordion">
  <div>...</div>
  <div>...</div>
  ...
  <div>...</div>
</div>
<script type="text/javascript" charset="utf-8">
  $('#my_accordion').accordion(...)
</script>

My wrong assumption was that anything inside the item’s <div> would become content, and a header’s text just extracted. However, each item must have exactly two elements - the first one for the header, and the second one for the content. The first element needs to be queryable. The second element apparently does not have to be marked in any special way:

<div class="accordion_item">
  <h3>....</h3>
  <div>...</div>
</div>

With that infrastructure in place it is a simple call to create an accordion (add other options to taste):

$("div#my_accordion").accordion({ header: "h3" });

My next task was to allow all items to be collapsed. Since the application was to allow for easy reading of the conference notes, I wanted the items to collapse, when clicked on the active item’s header, so the whole list of sessions can be reviewed. That is done with the «alwaysOpen: false» parameter, while the «active: false» parameter creates the accordion initially closed:

$("div#my_accordion").accordion({
  active:     false,
  alwaysOpen: false,
  autoHeight: false,
  header:     "h3"
});

Hope that helps someone dealing with the Accordion widget the first time.

2008-10-04