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#
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.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.
No context#
This is is just some sample. Don’t even bother reading it; you will just waste your time.Default#
This is is just some sample. Don’t even bother reading it; you will just waste your time.Success#
This is is just some sample. Don’t even bother reading it; you will just waste your time.Info#
This is is just some sample. Don’t even bother reading it; you will just waste your time.Warning#
This is is just some sample. Don’t even bother reading it; you will just waste your time.Danger#
This is is just some sample. Don’t even bother reading it; you will just waste your time.Examples#
Empty collapsible boxes#
This seems to be an empty box#
Nested collapsible boxes#
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.
- item 1
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.
- item 2