This page (revision-11) was last changed on 20-Nov-2021 20:30 by Dirk Frederickx 

This page was created on 04-Jan-2014 12:21 by Juan Pablo

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Version Date Modified Size Author Changes ... Change note
11 20-Nov-2021 20:30 5 KB Dirk Frederickx to previous how to change the size of the clickable icon
10 12-Sep-2021 06:41 5 KB Dirk Frederickx to previous | to last documentation update
9 11-May-2019 08:13 2 KB Dirk Frederickx to previous | to last
8 27-Jul-2017 14:45 2 KB Dirk Frederickx to previous | to last Category.D ==> Category.Documentation
7 16-Jul-2017 13:32 2 KB mingbai to previous | to last Category.Documentation ==> Category.D
6 29-Apr-2016 10:37 2 KB Dirk Frederickx to previous | to last Remove dirt
5 31-Mar-2016 21:49 2 KB Juan Pablo to previous | to last +18556394698 windows 10 online technical support Toll free number ==> JSPWikiStyle
4 31-Mar-2016 19:07 2 KB smith to previous | to last JSPWikiStyle ==> +18556394698 windows 10 online technical support Toll free number
3 24-Jan-2015 07:56 2 KB David Vittor to previous | to last link to JSPWikiStyle
2 04-Jan-2014 12:31 2 KB Harry Metske to previous | to last linked to category.documentation
1 04-Jan-2014 12:21 2 KB Juan Pablo to last
Incoming links Outgoing links
CollapsibleList
CollapsibleList

Difference between version and

At line 1 changed one line
!! Collapsible list
%%lead
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.
At line 3 removed 4 lines
%%tabbedSection
%%tab-Introduction
!Introduction
This %~%collapse %%category [JSPWikiStyle] /% turns ordinary lists into collapsible trees.
At line 8 changed 4 lines
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)
See also [Collapsible Box], [Haddock Styles], [Accordion].
At line 13 changed 2 lines
Collapsible lists are included in the standard JSPWiki v2.3.x.
They appeared originally in the [BrushedTemplate] --[DF|DirkFrederickx], Jun 2004, refactored Oct 2005
%%tabs
At line 16 changed one line
See also [collapsible boxes|Collapsible Box].
!!Usage
At line 18 changed 2 lines
%%(border:2px solid #e0e0e0;float:left;)
[Collapsible List/collapse-open.jpg]
%%columns.border
__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
At line 21 changed 2 lines
%%(border:2px solid #e0e0e0;float:left;)
[Collapsible List/collapse-closed.jpg]
}}}
----
__Collasible list__
%%collapse
* list item 1
** list item 1.1
*** list item 1.1.1
*** list item 1.1.2
At line 36 added one line
/%
At line 25 changed one line
%%(clear:both)
Ordered collapsible lists are initially rendered collapsed.
At line 40 added 13 lines
%%columns.border
__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
At line 54 added 8 lines
}}}
----
__Collasible list__
%%collapse
# list item 1
## list item 1.1
### list item 1.1.1
### list item 1.1.2
At line 29 changed 2 lines
%%tab-Usage
!Usage
/%
At line 32 changed 3 lines
Enclose the collapsible list in {{%~%collapse}} tag.
* Unorder sublists (* bullet) are rendered by default expanded
* Ordered sublists (# bullets) are rendered by default collapsed.
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
%%indent-1
{{{%%add-css
.collapse-btn { font-size: 1.3em; }
/%
}}}
/%
At line 36 changed 2 lines
{{{
%%collapse
!!Mixed UL/OL
You can mix unordered and ordered lists
%%columns.border
Default list
At line 41 changed one line
*** Nice
*** 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.
At line 47 changed 5 lines
*** Sydney
**** Kangeroo
**** Huppeldepup
/%
}}}
** Sydney
*** Kangeroo
*** Huppeldepup
At line 53 changed one line
Reality check:
----
With {{%~%collapse}}
At line 58 changed 2 lines
*** Nice
*** India
*** 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.
At line 65 changed 5 lines
*** Sydney
**** Kangeroo
**** Huppeldepup
/%\\
** Sydney
*** Kangeroo
*** Huppeldepup
At line 71 changed 2 lines
%%tab-Implementation
!Implementation
/%
At line 74 changed one line
Collapsible lists only work if you have javascript turned on.
!!Skipped levels
At line 76 changed 3 lines
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.
Lists can have empty items.
At line 80 changed 6 lines
* 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.
%%columns.border
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}}
%%collapse
*list item 1
*** list item 111
*** list item 112
*** list item 113
*list item 2
**list item 21
***list item 211
/%
/%
At line 87 changed 3 lines
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.
!!No style
At line 91 changed one line
[Collapsible List/brushed-collapse.jpg]
{{.list-nostyle}} hides the bullets
At line 158 added 10 lines
%%columns.border
With {{%~%list-nostyle}}
%%list-nostyle
*list item 1
*** list item 111
*** list item 112
*** list item 113
*list item 2
**list item 21
***list item 211
At line 169 added 10 lines
----
{{{
%%collapse.list-nostyle
*list item 1
*** list item 111
*** list item 112
*** list item 113
*list item 2
**list item 21
***list item 211
At line 180 added 131 lines
}}}
----
With {{%~%collapse.list-nostyle}}
%%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
%%columns.border
With {{%~%list-unstyled}}
%%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}}
%%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
%%columns.border
With {{%~%list-group}}
%%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}}
%%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
%%columns.border
Default
%%tree
*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}}
%%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