JSPWiki: Collapsible Box

The %%collapsebox style provides an easy way to add a collapsible boxes.

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.

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

You can also use the Accordion Style, but the state of accordion panes are not stored between page reloads.

See Collapsible List, Accordion.

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.

%%collapsebox
! Title of the box
Here is the body of the box ..
/%

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.

Use %%collapsebox.closed to create a initially closed box.

%%collapsebox-closed
! Title of the closed box
Here is the body of the box ..
/%

Title of the closed box#

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.