Collapsible Fieldsets

Last modified: September 6, 2009 - 02:30

What it is

Makes use of Drupal's collapsible fieldsets for use on your custom forms. There are 2 states that can be specified when the page loads, collapsed and expanded.

How to use it

  1. In your custom forms, break the fields into sections with the <fieldset></fieldset> object.
  2. Place the following scrpt references in your page. You may have to put in absolute URLs.
  3. <script type="text/javascript" src="/misc/drupal.js"></script>
    <script type="text/javascript" src="/misc/collapse.js"></script>

  4. For the fieldsets that you wish to be collapsable, add class=" collapsible" within the fieldset brackets (see example below)
  5. If you want the fieldset to be collapsed, add class=" collapsible collapsed" instead
  6. You may need to put in the < ! --break-- > tag above the form so it doesn't muck up your template when the page is in 'teaser' view.

Example form

<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/misc/collapse.js"></script>

<form name="form1" method="post" action="www.site.com">
  <p>
  <fieldset class=" collapsible"><legend>Collapsible</legend>
  <table>
    <tr>
      <td>Name:</td>
      <td><input type="text" name="name" value="<?php
global $user;if($user->uid) { print check_plain($user->name);}?>
" ></td>
    </tr>
    <tr>
      <td>Email: </td>
      <td><input type="text" name="email" value="<?php
global $user;if($user->uid) { print check_plain($user->mail);}?>
" ></td>
    </tr>
  </table>
  </fieldset>
  <fieldset class=" collapsible collapsed"><legend>Collapsed</legend>
  <table>
    <tr>
      <td>Name:</td>
      <td><input type="text" name="name" value="<?php
global $user;if($user->uid) { print check_plain($user->name);}?>
" ></td>
    </tr>
    <tr>
      <td>Email: </td>
      <td><input type="text" name="email" value="<?php
global $user;if($user->uid) { print check_plain($user->mail);}?>
" ></td>
    </tr>
  </table>
  </fieldset>

Drupal 5

With the new PHP form API (FAPI), collapsible forms can be easily created:

<?php
$form
['contact'] = array(
 
'#type' => 'fieldset',
 
'#title' => t('Contact settings'),
 
'#weight' => 5,
 
'#collapsible' => TRUE,
 
'#collapsed' => FALSE,
);
?>


See the <a href="http://api.drupal.org/api/HEAD/file/developer/topics/forms_api_reference.html#fieldset">FAPI reference</a>.

<h2>Drupal 5</h2>

To create a fieldset containing a number of fields, do the following in hook_form():

Create a form element of type 'fieldset'.
The items to go in that fieldset are created as children of the fieldset item:
<code>
//Hide various sections of the form in expanding fieldsets.
//This is done by creating a "fieldset" element on the form, then
//putting the items you want to be in the fieldset as subarrays of that element.
$form['myfieldset']= array(
'#type' => 'fieldset',
'#title' => t('Click Me to Expand'),
'#weight' => 1,
'#collapsible' => TRUE,
'#collapsed' => True
);

$form['myfieldset']['field01'] = array(
'#type' => 'file',
'#title' => t('Upload File'),
'#description' => "",
'#required' => FALSE,
'#weight' => 1
);

$form['myfieldset']['field02'] = array(
'#type' => 'textfield',
'#title' => t('Enter Text'),
'#description' => "",
'#required' => FALSE,
'#weight' => 1
);

 
 

Drupal is a registered trademark of Dries Buytaert.