This page (revision-10) was last changed on 12-Sep-2021 06:28 by Dirk Frederickx 

This page was created on 05-Jan-2014 23:57 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
10 12-Sep-2021 06:28 4 KB Dirk Frederickx to previous fix image link
9 12-Sep-2021 06:26 4 KB Dirk Frederickx to previous | to last documentation update
8 13-Mar-2017 17:46 1 KB Dirk Frederickx to previous | to last Restore previous version
7 11-Mar-2017 09:39 1 KB Sakthi to previous | to last
6 11-Mar-2017 09:39 1 KB Sakthi to previous | to last
5 29-Apr-2016 10:45 1 KB Dirk Frederickx to previous | to last Remove dirt
4 31-Mar-2016 21:49 1 KB Juan Pablo to previous | to last +18556394698 windows 10 online technical support Toll free number ==> JSPWikiStyle
3 31-Mar-2016 19:07 1 KB smith to previous | to last JSPWikiStyle ==> +18556394698 windows 10 online technical support Toll free number
2 05-Jan-2014 23:58 1 KB Juan Pablo to previous | to last
1 05-Jan-2014 23:57 1 KB Juan Pablo to last content based on original page
Incoming links Outgoing links
Collapsible Box
Collapsible Box

Difference between version and

At line 1 changed 4 lines
%%prettify-nonum
%%lead
The {{{%%collapsebox}}} %%category [style|Haddock Styles] /% provides an easy way to add a collapsible boxes.
/%
!! Collapsible Box
At line 6 changed 2 lines
A collapsible box contains a clickable header and a body. The user can expand or collapse the body by clicking the toggle button. ( {{{+}}} / {{{-}}} icon) THe user can also use the {{{tab}}} key to navigate to the button; and press {{{enter}}} or {{{spacebar}}} to toggle.
%%tabbedSection
%%tab-Introduction
At line 9 changed one line
The collapsible state is persisted in a cookie, so when you visit the page later on, the last-visited state is restored. See [Collapsible List]
This %%category [JSPWikiStyle]/% is an extension of [Collapsible Lists|Collapsible List].
At line 11 changed one line
You can also use the [Accordion Style|Accordion], but the state of accordion panes are not stored between page reloads.
''__It provides collapsible boxes:__'' when closed only the title of the box is visible; when opened the complete box becomes visible. A open/close icon (+) will be shown at the right edge of the box, indicating the status of the box.
E.g. [TableOfContents] plugin renders the toc by default inside a collapsible box.
At line 13 changed one line
See [Collapsible List], [Accordion].
--[DF|DirkFrederickx], Nov 05, Jul 06, added to JSPWiki since v2.5.80.
At line 15 changed 3 lines
%%tabs
!!Usage
Put the {{%~%collapsebox}} markup around the box content.The first line of the box content should be a {{!}}, {{!!}} or {{!!!}} which will become the clickable header of the box.
Reality check:
At line 19 removed 3 lines
%%columns
{{{
At line 24 changed 4 lines
Here is the body of the box ..
/%
}}}
----
Here is the body of the box.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In tempus ante nec ipsum. In ut felis id leo aliquet euismod. augue lorem, posuere eu,
tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat,
accumsan ac, sem.
* item 1
At line 29 changed 2 lines
! Title of the box
This is is just some sample text. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
! Title of the inner box
INNER BOX CONTENT.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In tempus ante nec ipsum. In ut felis id leo aliquet euismod. augue lorem, posuere eu,
tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat,
accumsan ac, sem.
At line 31 added one line
* item 2
At line 34 added 2 lines
/%
%%tab-Usage
At line 35 changed one line
Use {{%~%collapsebox.closed}} to create a initially closed box.
The first {{!}}, {{!!}} or {{!!!}} becomes the title of the collapsebox.
Use the style {{%~%collapsebox-closed}} to close the box by default.
At line 37 removed one line
%%columns
At line 39 changed 4 lines
%%collapsebox-closed
! Title of the closed box
Here is the body of the box ..
/%
%%collapsebox
! Title of the box
Here is the body of the box
* item 1
* item 2
/%
At line 44 removed 7 lines
----
%%collapsebox-closed
! Title of the closed box
This is is just some sample text. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
[JSPWikiStyle/poppy.jpg]
/%
/%
At line 52 changed 52 lines
!!Colors
By default, a collapsible box has no borders or background color.
You can add a contextual style with the {{{.}}} operator like this: {{%~%collapsebox.default}}, {{%~%collapsebox.success}}, {{%~%collapsebox.info}}, {{%~%collapsebox.warning}} or {{%~%collapsebox.danger}}.
%%columns
%%collapsebox
!No context
This is is just some sample. Don’t even bother reading it; you will just waste your time.
/%
----
%%collapsebox.default
!Default
This is is just some sample. Don’t even bother reading it; you will just waste your time.
/%
----
%%collapsebox.success
!Success
This is is just some sample. Don’t even bother reading it; you will just waste your time.
/%
/%
%%columns
%%collapsebox.info
!Info
This is is just some sample. Don’t even bother reading it; you will just waste your time.
/%
----
%%collapsebox.warning
!Warning
This is is just some sample. Don’t even bother reading it; you will just waste your time.
/%
----
%%collapsebox.danger
!Danger
This is is just some sample. Don’t even bother reading it; you will just waste your time.
/%
/%
!!Examples
!Empty collapsible boxes
%%collapsebox.size-80.default
!This seems to be an empty box
/%
!Nested collapsible boxes
%%collapsebox.default
! Title of the box
Here is the body of the box.\\
This is is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
%%collapsebox-closed
! Title of a closed box
Here is the body of the box
At line 105 removed 5 lines
%%collapsebox.default
! Title of the inner box
INNER BOX CONTENT.\\
This is is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
/%
At line 114 removed one line
This page (revision-10) was last changed on 12-Sep-2021 06:28 by Dirk Frederickx  Top