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.

Step-by-step

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.

Comments

Many thanks for that. It's very clear. I am going to give it a bash now.

Cheers, Ade

(At least according to Google Analytics it is.) I'll have to see if I can write some more on jQuery and Drupal.

The good news is that will get a lot easier in Drupal 7... jQueryUI will be standard, so no fussing around with different versions. The only issue may be towards the end of life of D7 when the jQueryUI version is out of date.

Thanks for your comments!

Thanks for this excellent recipe! I had a little time of it, however. The jquery UI instructions say they should be in site/all/libraries, i.e., site/all/libraries/jquery.ui. However, this doesn't work (but DOES work if you're using the older jquery versions) To get 1.7.3 to work, jquery.ui must be in site/all/modules/jquery_ui having jquery.ui a peer of jquery_ui didn't work.

being a complete jquery newbie, with now javascript knowledge I was able to install an accordion on my site. Jippie.

I did get a little stuck on one point 7, but that was me not knowing how to use the firebug console. So for those who don't know how this works, open firebug and click "console". On the bottom of firebug one can now paste "$().jquery;" next to three ">>>" and after pressing return, firebug shows which version is being installed. If the console remains blank, no jquery version is not being loaded.

Another error which I had, was where to paste the "jquery_ui_add('ui.accordion');". Pasting this in the template.php did work, but only when I pasted it above all other functions.

Does Drupal load iu.accordion on all pages or only when needed? I don't want to bloat my code. How can I avoid this? Or in the case of using lightbox, avoid using the two codes simultaneously.

Thanks for the comment. Regarding where to put the code, there's always a lot of choices in Drupal. If you put it in template.php, it will be included on every page. There are options for loading only on certain page, but I'm not sure they're worth the effort.

I wouldn't worry too much about the extra Javascript. It will be cached so it doesn't download on every page request and it shouldn't affect the time the browser takes to render the page by any noticeable amount. D6 already includes a lot of JS by default and D7 even more.

Hi,

I followed all the instructions and Google Chrome shows that jquery 1.3.2 is installed. Then I put following code into the body of a page in the drupal website and enable full html:

<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>

But it shows just the standard h3 format. Is this the right place to put the code?

Thanks for help ...

Michael

Sorry I didn't see that the html code was interpreted:

<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>

Michael, the markup looks OK... However, you would need both jQuery + jQueryUI and I'm not sure you have that. The jquery_ui module will let you add the right library with the following function in your template.php: jquery_ui_add('ui.accordion');

If I turn of js aggregation, it looks like that includes two js files for me:

<script type="text/javascript" src="/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.core.min.js?i"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.accordion.min.js?i"></script>

You could just add them manually if you don't use the jquery_ui module.

HTH

Thanks, Cleaver! I think I have both jQuery (you mean the library?) and jQueryUI, for the command jquery_ui_add('ui.accordion') doesn't come up with an error message. If I rename accordion to acordion, then I get an error message:

warning: file_get_contents(sites/all/modules/jquery_ui/jquery.ui/ui/minified/ui.acordion.min.js) [function.file-get-contents]: failed to open stream: No such file or directory in /home/www/web58/html/marcel/includes/locale.inc on line 1714.

That should be proof that I have jQuery and jQueryUI, not?

Thanks for help ...
Michael

I find the Developer Tools in Chrome browser to be good for checking this. Here's what I just did to check that the versions are correct:

  1. Make sure Javascript optimization is off (admin/settings/performance).
  2. Open the accordion page in Chrome.
  3. Open the Developer tools (Tools > Developer Tools) -- might be different by O/S?
  4. On the Developer Tools "Elements" tab, drill down to the JS script includes in .
  5. You should see "ui.core.min.js" and "ui.accordion.min.js" (the "min" is the minified version).
  6. Click on each to see the contents of the file... you should see the version at the top. In my case it was "jQuery UI 1.7.3".
  7. Next look for the jQuery library: "jquery.min.js" (minified version). The version in my case is "jQuery JavaScript Library v1.3.2".

If you don't see any of the files, that would explain your problem. Also, older versions of the files would be a problem, especially the jquery.min.js. You definitely need version 1.3.x for the accordion to work.

Thanks for writing up this step-by-step. I, unfortunately, cannot get it to work.

I'm running Drupal 6.19, I installed and enabled the jQuery update module (setting it to Minified in the configuration). I also downloaded and installed v.1.7.3 of jQuery, renaming the Development Bundle directory jquery.ui.

I'm testing this by creating a Page with the following code in it....

<code>
<?php

jquery_ui_add('ui.accordion');

?>

<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>

<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
</code>

i'm using chrome, so when i check the developer view and view the js resources, it lists ui.accordion.min.js and ui.core.min.js, but they're not linking properly.

i've tried numerous tutorials and i keep having the same problem. any insight? my head is about to explode.

thanks very much!

Does the reply above to Michael help? I'd suspect the version of the base jQuery being 1.2, instead of 1.3.