[{TableOfContents }]
!! 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|Brushed Template CollapseBox] and %%category [JSPWikiStyles]%% --[DF|DirkFrederickx], Nov 05

%%(border:2px dotted grey;)
[vanilla-collapse.jpg] [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.

Collapsable lists are included in the standard JSPWiki v2.3.x.
They appeared originally in the [BrushedTemplate] --[DF|DirkFrederickx], Jun 2004, refactored Oct 2005

!! 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:
%%collapse
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|Brushed Template CollapseBox] and %%category [JSPWikiStyles]%% --[DF|DirkFrederickx], Nov 05

%%(border:2px dotted grey;)
[vanilla-collapse.jpg] [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.

Collapsable lists are included in the standard JSPWiki v2.3.x.
They appeared originally in the [BrushedTemplate] --[DF|DirkFrederickx], Jun 2004, refactored Oct 2005

!! 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
* Europe
** France
*** Paris
*** Nice
** South-Africa
** Belgium (collapsed by default)
### Brussel 
### Peulis
* Australia
**
*** Perth
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
%%

%%tabbedSection
%%tab-Implementation
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.

%%
%%tab-CSS
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); }
}}}
%%
%%
----

__Problem__: using IE try collapsing the Belgium node and then clicking on the CamelCase link embedded in the tree below.

%%collapse
* ||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 
*** Brussel 
*** Peulis
**[CamelCase]
**Australia
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
%%

Back to [BrushedTemplate]