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 one line
!! Collapsible Box
%%prettify-nonum
%%lead
The {{{%%collapsebox}}} %%category [style|Haddock Styles] /% provides an easy way to add a collapsible boxes.
/%
At line 3 changed 2 lines
%%tabbedSection
%%tab-Introduction
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.
At line 6 changed one line
This %%category [JSPWikiStyle]/% is an extension of [Collapsible Lists|Collapsible List].
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]
At line 8 changed 2 lines
''__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.
You can also use the [Accordion Style|Accordion], but the state of accordion panes are not stored between page reloads.
At line 11 changed one line
--[DF|DirkFrederickx], Nov 05, Jul 06, added to JSPWiki since v2.5.80.
See [Collapsible List], [Accordion].
At line 13 changed one line
Reality check:
%%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.
At line 19 added 3 lines
%%columns
{{{
At line 17 changed 6 lines
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
Here is the body of the box ..
/%
}}}
----
At line 24 changed 6 lines
! 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.
! 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.
At line 31 removed one line
* item 2
At line 34 removed 2 lines
/%
%%tab-Usage
At line 37 changed 2 lines
The first {{!}}, {{!!}} or {{!!!}} becomes the title of the collapsebox.
Use the style {{%~%collapsebox-closed}} to close the box by default.
Use {{%~%collapsebox.closed}} to create a initially closed box.
At line 37 added one line
%%columns
At line 41 changed 6 lines
%%collapsebox
! Title of the box
Here is the body of the box
* item 1
* item 2
/%
%%collapsebox-closed
! Title of the closed box
Here is the body of the box ..
/%
At line 48 changed one line
----
At line 50 changed 2 lines
! Title of a closed box
Here is the body of the box
! 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]
/%
/%
!!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.
At line 105 added 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 added one line
This page (revision-10) was last changed on 12-Sep-2021 06:28 by Dirk Frederickx  Top