The accordion Java Script

Our module code was short, but our JavaScript code is going to be even shorter. In accordion.js, we need to write the necessary glue code to find the right part of our document and turn it into an accordion. With jQuery at our disposal, and jQuery UI tightly integrated, this process is as easy as writing a simple jQuery chain.

To make things even simpler, we will wrap this in a Drupal behavior and allow Drupal to control the initialization of our widget:

* JavaScript for initializing and adding accordion effect.

Drupal.behaviors.accordion = function () {

$('#sidebar-left:not(.ui-accordion)').accordion({ header: 'h2'

The body of our newly defined behavior has a single jQuery chain that consists of two parts. First, the jQuery call executes this query:


This will look for an element with the ID sidebar-left that does not have the class ui-accordion.

The sidebar-left ID is a standard ID for Drupal. It identifies the lefthand region where blocks are typically located. Here's what my sidebar-left column looks like before running the previous code:

m butcher o My account

► Administer o Log out

Content Management o Create content o Manage comments o Manage content o Manage taxonomies o Change theme

Development o Devet settings o Empty cache o Enable Theme developer o Function reference o Hook_elements() o Nodiacc ;s summary o PHPinfoO o Rebuild menus o Reinstall modules o Run cron o Session viewer o Theme registry o Variable editor


Search this site:

O (Search)

Was this article helpful?

0 0

Post a comment