jQuery UI Accordion in Drupal 6

jQuery UI: It can add some great features to your site, but it is a bit difficult to set up in Drupal 6.jQuery UI: It can add some great features to your site, but it is a bit difficult to set up in Drupal 6.jQuery UI is a collection of jQuery plugins and offers great interface widgets that are easy to use. You probably recognize many of them from websites you've used. The only catch is that they don't work with Drupal version 6 without a few tweaks. I had an idea for using the jQuery UI Accordion widget and I had to figure out how to get it working on my D6 website.

Library conflicts

There is a jQuery UI module for Drupal (http://drupal.org/project/jquery_ui). Since jQuery UI is a third party library, you have to download it and install it in the module directory. Now there are a few snags... The native jQuery library for D6 is 1.2.6. The Drupal jQuery UI module tells you to download the jQuery UI v. 1.6 library which works with jQuery v. 1.2.6. But, the jQuery UI v. 1.6 is no longer available on the site. jQuery UI v. 1.7 is available, but it requires jQuery 1.3. That left me with a choice: find the obsolete library, or upgrade Drupal's native jQuery library. I chose the latter.

Updating jQuery

There is an easy way to update Drupal's jQuery library using a module called, wait for it... jQuery Update (http://drupal.org/project/jquery_update). In D6, you just install, configure and that's it. (Amost.)

Using the Accordion

Once you install jQuery UI and get the right versions of the libraries, there's one more thing before you can add the Accordion code on your page. That is, to include the Javascript library in your page or module. You could just figure out the path and add a script tag, but the Drupal jQuery UI module provides a shortcut: the jquery_ui_add() function. I was adding to a page, so I took the simplest option and added it to my template.php file.


Here's a step by step of what I did. I'll assume you have all modules installed under "/sites/all/modules" and have a little familiarity with jQuery. The version numbers will change, but hopefully this will still work for a while:

  1. Install the jquery_ui module (version 6.x-1.3).
  2. Download the jquery_ui library from http://jqueryui.com/download. I chose the version 1.7.3.
  3. Unpack the jQuery UI archive. Look for the directory named "development-bundle" and copy it to your /sites/all/modules/jquery_ui directory. Next rename "development-bundle" to "jquery.ui". NOTE: the naming of folders in the jQuery UI archive has changed, so you may see some out-of-date documentation that refers to it by another name.
  4. Enable the jQuery UI module. If you tried before you got the library copied to the right place, you probably got a nice red error message.
  5. Install and enable the jquery_update module (version 6.x-2.0-alpha1). I was a bit wary of the "alpha" tag, but it works well enough for me. If a newer version comes out soon, I suggest you use it.
  6. Configure the jquery_update module (/admin/settings/jquery_update) and choose production and click "save".
  7. The first time I enabled jquery_update module, it didn't "take". Be sure to check the version--you can use the Firebug console and run $().jquery; to display the version. It showed the 1.2.6 version for me until I disabled, enabled and configured the module again. (Alas, it is an "alpha" version.)
  8. Add the following code to your template.php: jquery_ui_add('ui.accordion');
    There's plenty of options for where to put this (eg. in your module code), but this function basically does a drupal_add_js() with the coordinates of the widget you choose. See the jquery_ui module README file for more examples.
  9. Write your markup for the accordion. http://jqueryui.com/demos/accordion/ has lots of examples.

In Conclusion

It's not nearly as easy as it should be, but jQuery has been advancing faster than new versions of Drupal have come out. By the time D7 is released, this should not be quite the trouble it is now.

Finally, when I added it to my webpage (http://www.vergeinteractive.ca/content/definitions), I wanted some extra features for the accordion such as opening to a certain section based on a hash in the URL (eg. http://www.vergeinteractive.ca/content/definitions#community). See my source for details, or let me know if you'd like to see another article on the subject.

Additional Note: A the time of writing, I forgot one more annoying detail: jQuery UI conflicts with Lightbox2 (version 6.x-1.9). So if you will have to disable Lightbox2 or your site may become unusable. I have read that this is fixed in the DEV branch of the lightbox2 project and will probably be fixed in any version after 6.x-1.9. Thanks to Jay Callicott (https://twitter.com/drupalninja) for pointing this out.