Drupal: Accordions in custom module - How to

If you'd like some fancy accordion on your module's output, here is a short recipe:

1.Download jquery_update.
Make sure that your jquery version is minimum 1.3.+ after the installation. This is required for the jquery_ui 1.7.x in step 2. An easy way to check the jquery version is to visit the drupal status report page under /admin/reports/status

2. Download jquery_ui.
Install it according to the instructions in the documentation.
Important! For accordions to work we need at least the jquery ui version 1.7.x

3. Once everything is in order, time to include the required files and javascript in our module:
Adding this somewhere in the beggining of the module:

function my_module_init() {
	jquery_ui_add('ui.accordion');
	// add inline javascript
	drupal_add_js('
		  $().ready(function() {
			$("#accordion").accordion();
		  });
		', 'inline');
}  

will make sure to include the necessary files and javascript. If Accordions are not working, it is a good idea to check in the code if the necessary files are available:

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

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

and

< script type="text/javascript">< !--//-->< ![CDATA[//>< !--
		  $().ready(function() {
			$("#accordion").accordion();
		  });
		
//--><!]]>
</script> 

4. Prepare the structure of your module's output. According to the Jquery ui accordions documentation, it should look something like:

< 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>