LDAPWiki: Collapsible List

Collapsible list #

Introduction#

This %%collapse JSPWikiStyle turns ordinary lists into collapsible trees.

Testing the collapsible trees .. Thrusday ...Clicking the list item bullets will expand or collapse nested list items.
As a bonus, the status of expanded/collapsed nodes are persisted in a browsers cookie, so you don't have to redo your clicking when visiting other pages in between. (cookies are saved for favorites as well as the main page)

Collapsible lists are included in the standard JSPWiki v2.3.x. They appeared originally in the BrushedTemplate --DF, Jun 2004, refactored Oct 2005

Usage#

Enclose the collapsible list in %%collapse tag.

Unorder sublists (* bullet) are rendered by default expanded
Ordered sublists (# bullets) are rendered by default collapsed.

%%collapse
* Europe
** France
*** Paris
*** Nice
** South-Africa
** Belgium 
### Brussel  (these items are by default collapsed)
### Peulis
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
/%

Reality check:

Europe
- France
  - Paris
  - Nice
  - India
- South-Africa
- Belgium
  1. Brussel (these items are by default collapsed)
  2. Peulis
Australia
- - Sydney
    - Kangeroo
    - Huppeldepup

Implementation#

Collapsible lists only work if you have javascript turned on.

The formatting of the bullets is done through CSS. You can change the look and feel of open/close bullets as you wannt. Check out templates/default/jspwiki.css for the CSS stylesheet definitions, section 460-Collapsible-Lists.

Default list-item bullets are turned off. (list-style:none;) Additionaly, the list-items get a position:relative; such that the inserted collapse bullets can be positioned correctly.
Each inserted bullet gets a css selector .collapseBullet, collapseOpen or collapseClose.
These bullets are floated to the left, and shifted 1.5em to the left so that they line up with the previous indentation level.

You may be interested to replace the standard, text-based, bullets by fancy images. This can easily be done through css updates. Some examples are available in the different skin.css files. Notice how the overflow:hidden; can be used to hide the default bullets and e.g. replace it by some background-images.

https://jspwiki-wiki.apache.org/attach/CollapsibleList/brushed-collapse.jpg

See: JSPWikiStyle

Category.Documentation