Format Drupal's collapsible fieldset's legend as a header block

Submitted by Jake on Fri, 04/03/2009 - 11:36

I am using Drupal's collapsible fieldsets for several projects and ran into two issues.

The first issue was that the state of a collapsible fieldset was not being saved, so I wrote and contributed a fieldset helper module that saves the state of Drupal's collapsible fieldsets.

The second issue, which is a problem for all fieldsets and not just Drupal, is it is very difficult to style a fieldset's legend as a header block. Typically, the legend is layered over a fieldset's border.

The easist solution is to replace the legend with a header tag. This solution will work for a static fieldset but does not work with Drupal's collapsible fieldsets because Drupal requires the <legend > tag for the JavaScript to work. So I was forced to hack away at the Drupal's collapsible fieldset.

The solution I came up with is to remove all the styling from the fieldset and legend tags and rely on nested 'container' tags within the fieldset and legend tags to manage the header's positioning and styling.

Drupal's collapsible fieldset script adds an <a> tag around the content of the <legend> tag and a <div class="fieldset-wrapper"> around the content of the <fieldset> tag. I was able to reposition and style these nested tags and convert my fieldsets and legends into blocks.

Below is working example of my solution which is currently just using static html vs FAPI generated fieldset.

References

Forms With Style Part 1 - Fieldsets & Labels

Tested Browsers

Firefox 3.x
IE 7.x
IE 6.x: legend block jumps when fieldset is collapsed.
Safari 3.x
Opera 9.x

Sample code

<fieldset class="collapsible">
  <legend><span>Fieldset 01-01</span></legend>
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</div>
</fieldset>

Notes

The a tag inside the legend is absolutely positioned, relative to the fieldset.
The span tag inside the legend is where you should add the legend's border, background, and padding.
The div.fieldset-wrapper tag has a top margin the is set to the height of a a tag inside the legend.
The div.fieldset-wrapper tag is where you should add the fieldset content's border, background, and padding