JSPWiki: CollapsibleList

With %%collapse you can turn ordered and unordered hierarchical lists and trees into collapsible lists.

The list bullets become clickable buttons to expand or collapse the nested list items. You can also use the keyboard: press Tab/shift-Tab to navigate between the buttons; use Enter or spacebar to toggle the collapse state of the list item.

Default rendering

list item 1
- list item 1.1
  - list item 1.1.1
  - list item 1.1.2

%%collapse
* list item 1
** list item 1.1
*** list item 1.1.1
*** list item 1.1.2
/%

Collasible list

list item 1
- list item 1.1
  - list item 1.1.1
  - list item 1.1.2

Ordered collapsible lists are initially rendered collapsed.

Default rendering

list item 1
1. list item 1.1
  1. list item 1.1.1
  2. list item 1.1.2

%%collapse
# list item 1
## list item 1.1
### list item 1.1.1
### list item 1.1.2
/%

Collasible list

list item 1
1. list item 1.1
  1. list item 1.1.1
  2. list item 1.1.2

Note:

The state of each collapsible item is persisted in a cookie, so when you visit that page later on, the collapsible items are restored to their last-visited state.
You can delete the collapse cookie for a page in UserPreferences
The Sidebar has its own collapsible state cookie
The size of the clickable icon can be increased by changing the font-size of the .collapse-btn element

%%add-css  
  .collapse-btn { font-size: 1.3em; } 
/%

You can mix unordered and ordered lists

Default list

Europe
- France
  - Paris
  - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- South-Africa
- Belgium
  1. Brussel (these items are by default collapsed)
  2. Peulis
Australia
- Sydney
  - Kangeroo
  - Huppeldepup

With %%collapse

Europe
- France
  - Paris
  - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- South-Africa
- Belgium
  1. Brussel (these items are by default collapsed)
  2. Peulis
Australia
- Sydney
  - Kangeroo
  - Huppeldepup

Lists can have empty items.

Default list

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

%%collapse
*list item 1
*** list item 111
*** list item 112
*** list item 113
*list item 2
**list item 21
***list item 211
/%

With %%collapse

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

.list-nostyle hides the bullets

With %%list-nostyle

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

%%collapse.list-nostyle
*list item 1
*** list item 111
*** list item 112
*** list item 113
*list item 2
**list item 21
***list item 211
/%

With %%collapse.list-nostyle

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

.list-unstyled removes the indentiation of the list

With %%list-unstyled

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

%%collapse.list-unstyled
*list item 1
*** list item 111
*** list item 112
*** list item 113
*list item 2
**list item 21
***list item 211
/%

With %%collapse.list-unstyled

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

With %%list-group

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

%%collapse.list-group
*list item 1
*** list item 111
*** list item 112
*** list item 113
*list item 2
**list item 21
***list item 211
/%

With %%collapse.list-group

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

Default

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

%%collapse.tree
*list item 1
*** list item 111
*** list item 112
*** list item 113
*list item 2
**list item 21
***list item 211
/%

With %%collapse.tree

list item 1
- - list item 111
  - list item 112
  - list item 113
list item 2
- list item 21
  - list item 211

Category.Style, Haddock Template, Haddock Components, Collapsible Box