Last updated March 7, 2013. Created by dman on October 15, 2008.
Edited by inventlogic, Rob_Feature. Log in to edit this page.
The best-practice way to include javascript is to do it the way that Drupal already does. As well as being correct and concise, it avoids double-loading already available routines.
To add the Drupal 'collapsible' effect anywhere in your own page or theme, the following code should work. This can be pasted directly into the (HTML) of any node but does require PHP input format to be enabled.
<?php
drupal_add_library('system', 'drupal.collapse');
?>
<fieldset class=" collapsible collapsed">
<legend><span class="fieldset-legend">More Info</span></legend>
<div class="fieldset-wrapper">
<h3>Content goes here</h3>
<p>
Lots of hidden text.
Lots of hidden text.
Lots of hidden text.
Lots of hidden text.
Lots of hidden text.
</p>
</div>
</fieldset>There are a number of pre-defined libraries within Drupal that can be called using the drupal_add_library('system', 'drupal.somelibrary') function.
The example above can be best achieved by adding drupal_add_library('system', 'drupal.collapse') to your custom function as there is a dependance on another javascript file that is automatically taken care of.
The list of available libraries for Drupal 7 is shown on the function system_library page of the Drupal 7 API.
As the collapse.js depends on form.js both of these files are automatically added as this dependency is already defined in the system module libraries definition.
The more generic version of this function call is drupal_add_library('some.module', 'some.library') where a module has predefined libraries through the libraries API.
In order to get a list of the available libraries you can add dpm(drupal_add_library('some.module') to your function and you will get a list of the available libraries defined by the module.
Comments
Need Span tag with class fieldset-legend
When adding a collapsible fieldset to the settings edit page of a theme I found I needed to add a span tag inside the legend tag with the class = fieldset-legend. Maybe you can just add the class to the legend tag.
Drupal 7 Collapsible Fieldset Code:
<fieldset class="collapsible collapsed">
<legend><span class="fieldset-legend">Description</span></legend>
<div class="fieldset-wrapper">
<field......set />
<field......set />
<field......set />
</div></fieldset>
Adding a call to form.js
I tried adding this code to a block in Drupal 7 and received the following error in the JavaScript console window:
Object #<an Object> has no method 'drupalGetSummary'It appears that form.js needs to be loaded as well as collapse.js. Adding a call for this to the start of the above script remedied the problem for me:
<?phpdrupal_add_js('misc/form.js');
drupal_add_js('misc/collapse.js');
?>