Adding a collapsible fieldset to your nodes

Editor's note: This page attempts to demonstrate how to make a collapsible form fieldset appear on a page without actually using a form. While the results are pretty, semi-functional, and even slightly cool, this method is a no-no for semantics, usability, and even breaks the basic rules of HTML. A better way to do this would be to use jQuery to toggle the collapse/expand of a styled div. When someone posts a HowTo on doing exactly that, this page will be deleted and redirected to the better, safer jQuery method.

This method has not been tested in Drupal version 5.x, but will most likely work.

The Collapsible Fieldset is a drop-down area you see underneath a titled section. For example, on the Settings page (Administer » Settings) you see the titled sections such as:

• General settings
• Error handling
• Cache settings
• etc...

When you mouse click on any of these titles, the area expands below displaying the information corresponding to the section.

I found this feature useful to incorporate on node pages that are long. Instead of using a page break, a teaser, or read more option, you can use the Expandable / Collapsible Fieldset Feature. This method also works well when you want to initially display half of a table.

Want a demonstration? Click either of the 'read more' links on this web page.

This example uses the Multiple Expandable / Collapsible Fieldsets as explained in the second section below.

To use the Collapsible Fieldset feature, do the following:

1. Copy the following CSS code to a new file and save it as collapse.css. This code was extracted from the original drupal.css file version 4.7.5 and should work with later drupal versions. It was modified to not display the fieldset border by adding the "Removes Fieldset Border" CSS parameters shown in the first lines of code.
   collapse.css file
   
   /*
* $Id: Copied from the drupal.css file,v 1.147.2.8 2006/12/14 20:20:21 killes Exp $
*
* Collapsing fieldsets
*/

/* Removes Fieldset Border */
html.js fieldset {
border: 0; padding: 0;
}

html.js fieldset.collapsed {
  border-bottom-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  margin-bottom: 0;
}

html.js fieldset.collapsed * {
  display: none;
}

html.js fieldset.collapsed table *,
html.js fieldset.collapsed legend,
html.js fieldset.collapsed legend * {
  display: inline;
}

html.js fieldset.collapsible legend a {
  padding-left: 15px;
  background: url(menu-expanded.png) 5px 50% no-repeat;
}

html.js fieldset.collapsed legend a {
  background-image: url(menu-collapsed.png);
}

/* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */
* html.js fieldset.collapsible legend a {
}
2. Upload the collapse.css file to your site's /misc/ directory. (This is the same directory that contains the drupal.css file.) Note: the collapse.js file is a core file and is already in your /misc/ directory.
3. Copy the following code to your node page.

   Single Expandable / Collapsible Fieldset:
   

   <link rel=stylesheet type="text/css" href="/misc/collapse.css">
<script type="text/javascript" src="/misc/collapse.js"></script>

******* Enter the first part of your text here. *******

<form>
<fieldset class="collapsible collapsed">
<legend>More Information</legend>
<div>

******* Enter the last part of your text your text here. *******

</div>
</fieldset>
</form>

4. Replace the:

   ******* Enter the first part of your text here. *******

   with the first half of your text.

5. Next, replace the:

   ******* Enter the last part of your text your text here. *******

   with the remaining last half of the text that will be initially hidden. This is the text section that is expandable and collapsible.

To use multiple Expandable / Collapsible Fieldset, use the following code:

Multiple Expandable / Collapsible Fieldsets:

That's it!