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

inventlogic’s picture

inventlogic commented

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>
robertstaddon’s picture

robertstaddon commented

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:

<?php
drupal_add_js('misc/form.js');
drupal_add_js('misc/collapse.js');
?>
konolini’s picture

konolini commented

By using drupal_add_library instead of drupal_add_js you don't need to worry about loading first form.js. It gets loaded automatically and in the right order.

DYdave’s picture

DYdave commented

Hi guys,

Thanks a lot for posting this very interesting documentation page.

I assume this page is perhaps more intended for developers or themers. But for those with a limited development background, I just wanted to attract your attention on the Collapse Text module, which allows doing just what is described in this page: easily and safely creating collapsible fieldsets in content (input filter).

No knowledge of HTML, JS, PHP or Drupal's API is necessary. Simply install the module, configure it for text formats and use the syntax, with the special [collapse][/collapse] tags in page's body, as explained in module's documentation.
Additionally, Collapse Text integrates with CKEditor through Wysiwyg allowing users to insert collapisble text sections in content through a rich text editor.

So if you ever come to need to create collapsible text sections in content pages, feel free to take a closer look at the Collapse Text module, it might very well come in handy, depending on your requirements.

If you have any questions or encounter any issues while using the module, feel free to report in Collapse Text's issue tracker.
Cheers!