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.

See also Collapsible Box, Haddock Styles, Accordion.

Usage#

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
  1. 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
  1. 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; } 
/%

Mixed UL/OL #

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

Skipped levels#

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

No style#

.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

Unstyled#

.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

List Group#

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

Tree#

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
This page (revision-11) was last changed on 20-Nov-2021 20:30 by Dirk Frederickx  Top