CollapsibleSection

Description

This macro provides a way to display the contents of another page into an HTML div that can be collapsed and expanded. Its useful for including supplemental information in a page that normal users might not care about.

Download & Release Notes

Usage

<<CollapsibleSection(SectionTitle, PageName)>>

Example

collapsed by default:

<<CollapsibleSection("Title for Section", "PageName")>>

expanded by default:

<<CollapsibleSection("Title for Section", "PageName", 1)>>

set header-depth:

<<CollapsibleSection("Title for Section", "PageName", 1, "h3")>>

set custom plus/minus signs:

<<CollapsibleSection("Title for Section", "PageName", 1, "h3", plus=++, minus=--)>>

Copyright

License

GPL v2

Bugs

Discussion

With the limitation of only having one section open at once, you could eliminate the JavaScript and use the CSS :target pseudo-class. Although it's a CSS 3 feature, it appears to be supported in various browsers. First, you need to define your sections. Then, you need to have hyperlinks which reference those sections - something like this:

<a href="#mysection"><h2>Collapsible Section</h2></a>
...

The trick is to have a specific class (collapsible, for example) on each section:

<div id="mysection" class="collapsible">
...

And then to have a rule like this:

.collapsible:target {
    display: block;
}

When you follow a hyperlink to visit a specific section, the section will be displayed, but you also want to hide collapsible things which are not currently being visited, so you need this:

.collapsible:not(:target) {
    display: none;
}

And this gives you a CSS-only implementation. Sorry for the interruption! -- PaulBoddie 2011-06-17 23:51:13

If used as a heading the title does not get generated into Table of Contents. -- Anon