You've probably seen the accordion effect in use at Apple's website. I recently implemented this plugin in a Drupal module to get a similar effect.
First, download the plugin from Bassistance. I stuck the jquery.accordion.js in my module directory and then included it using the following code:
<?php
drupal_add_js(drupal_get_path('module','MYMODULENAME') . '/jquery.accordion.js');
?>I created a dataset to use with the theme_item_list function. For this example, I'll query the node table.
<?php
$sql = "select title from {node} where status='1' order by title asc";
$resource = db_query($sql);
$results = array();
while ($row = db_fetch_array($resource)) $results[] = $row;
?>I looped through the dataset and created an item list array consisting of an A tag and a DIV.
<?php
$items = array();
foreach ($results as $k => $v) {
// NOTE: you should use the l() function here, excuse my example
$items[] = "<a>{$v['title']}</a><div>MYTEXTHERE</div>";
}
?>I used the theme function to generate the html for a UL with a unique identifier.
<?php
$title = MYTITLE;
$type = 'ul';
$attributes = array(
'id' => 'MYITEMLISTID',
);
$page_contents .= theme('item_list', $items, $title, $type, $attributes);
?>Last, I added the jQuery to apply the accordion effect to my UL.
<?php
$(document).ready(function(){
$('#MYITEMLISTID').accordion();
});
?>