Table of Contents

Collapsable lists #

Turn ordinary lists into collapsable trees by enclosing them inside a %%collapse ... %% tag. When clicking a list item bullet, you can expand or collapse nested list items.

If you want the list to start uncollapsed, use a bullet list. If you want it to start collapsed, use a numbered list.

See also collapsable boxes and JSPWikiStyles

http://www.willeke.com/ASSETS/IMAGES/vanilla-collapse.jpg http://www.willeke.com/ASSETS/IMAGES/vanilla-collapsed.jpg

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.

Formatting of the bullets is done through CSS. You can change the look and feel of open/close bullets as you want. The default implementation uses • (normal) or « (closed bullet) or » (open bullet) but this can easily be replaced by any picture you want.

Usage#

Enclose the collapsable list in a %%collapse tag.
  • Unorder sublists (* bullet) are rendered by default not collapsed;
  • Ordered sublists (# bullets) are rendered by default collapsed.
%%collapse
* ||Europe||77||Europe||77
** |France|Europe|77|77
*** |Paris|Europe|77|77
*** |Nice|Europe|77|77
** |South-Africa|Europe|77|77
** Belgium (collapsed by default) 
### Brussel
### Peulis
* Australia
**
*** Perth
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
%%

Reality check:

If you want the list to start uncollapsed, use a bullet list. If you want it to start collapsed, use a numbered list.
http://www.willeke.com/ASSETS/IMAGES/vanilla-collapse.jpg http://www.willeke.com/ASSETS/IMAGES/vanilla-collapsed.jpg

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.

Formatting of the bullets is done through CSS. You can change the look and feel of open/close bullets as you want. The default implementation uses • (normal) or « (closed bullet) or » (open bullet) but this can easily be replaced by any picture you want.

Usage#

Enclose the collapsable list in a %%collapse tag.

  • Unorder sublists (* bullet) are rendered by default not collapsed;
  • Ordered sublists (# bullets) are rendered by default collapsed.
  • ||Europe||77||Europe||77
    • |France|Europe|77|77
      • |Paris|Europe|77|77
      • |Nice|Europe|77|77
    • |South-Africa|Europe|77|77
  • Europe
    • France
      • Paris
      • Nice
    • South-Africa
    • Belgium (collapsed by default)
      1. Brussel
      2. Peulis
  • Australia
      • Perth
  • Australia
      • Sydney
        • Kangeroo
        • Huppeldepup
Check out the scripts/jspwiki-common.js for the corresponding javascript routines.

After loading a page, a set of javascript routines are triggered for each <div class="collapse"> element. All nested sub-lists are made expandable, and new clickable list bullets to expand/collapse are inserted. By default, a sub-list is visible when using unordered lists or hidden when using ordered lists.

When a user clicks a list bullet, the related list item is opened or closed and its collapse status is stored in a cookie on the users browser. The next time the user visits this page, the last expand/collapse status is restored.

Since JSPWiki displays several wiki-pages in one screenshot ( the favorites and the main-page ) a separate cookie per page will be stored. This will keep the left menu collpase status across page navigations.

Check out templates/default/jspwiki.css for the CSS stylesheet definitions, section 460-Collapsable-Lists.
  • Nested sublists are left-indented by 1.5em (1.5 times the size of an m),
  • 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 collapse gets the css selector .collapseBullet, collapseOpen or collapseClose.
  • These bullets are absolute positioned which shifts them back 1.5em to the left so that they line up with the previous indentation level. (always keep the left:-1.5em of the li equal to the padding-left:1.5em of the ul)

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 BrushedTemplate. Notice how the overflow:hidden; is used to hide the default bullets and only show the background-images. Please adapt width:16px; text-indent:16px according the sizes of the images you want to use. Enjoy css !

brushed-collapse.jpg

/* +++ 460 Collapsable lists +++ */
.collapseBullet,
.collapseOpen,
.collapseOpen:hover,
.collapseClose,
.collapseClose:hover { width: 16px; text-indent: 16px; overflow: hidden;
                       background-color: transparent;
                       background-repeat: no-repeat; 
                       background-position: 0 center; }

.collapseBullet      { background-image: url(images/li-leaf.png); } 
.collapseOpen,
.collapseOpen:hover  { background-image: url(images/li-open.png); }
.collapseClose,
.collapseClose:hover { background-image: url(images/li-close.png); }

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-8) was last changed on 24-May-2008 13:25 by -jim