Community Documentation

Use drupal_add_library to add JS libraries : Your own collapsible fieldset

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:

<?php
drupal_add_js
('misc/form.js');
drupal_add_js('misc/collapse.js');
?>

About this page

Drupal version
Drupal 7.x
Level
Beginner
Audience
Designers/themers
Keywords
add javascript to function
Drupal’s online documentation is © 2000-2013 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License. Comments on documentation pages are used to improve content and then deleted.
nobody click here