Introduction#

This JSPWikiStyle allows you to add horizontal or vertical accordion sections to your wiki pages.

An accordion is an animated set of tabs. When clicking one of the tabs, all others are being closed with a smooth visual transition effect.

There are several accordion flavours:

• %%accordion: standard accordion with tabs positioned vertically. (example) This is great for LeftMenu's
  When used with a single tab, you can use this as a replacement of a Collapsible Box
• %%tabbedAccordion: tabs are positioned one behind the other like a tabbed book, similar to the good old Tabbed Sections but with stunning visual effect
• %%leftAccordion and %%rightAccordion: the tabs are positioned at the left or right side of the tab contents like a tabbed book

Standard Accordion#

All tabs are stacked vertically. Switching tabs will slide the tab vertically in or out.

Add a %%accordion around all tabs and start each tab with %%tab-<tab-name>. The name of a tab may only contain alphanumeric characters and a dash; but no other punctuations. It may not start with a digit. (css classname restrictions)

When the page loads, only the first tab will be visible. All other tabs are hidden, until you click the corresponding tab.

Note: when printing, only the visible tabs are shown.

%%accordion
%%tab-FirstTab
...
/%
%%tab-SecondTab
...
/%
/%

Reality check:

Tabbed Accordion#

This accordion variant generates a set of horizontal tabs with accordion effect. It is similar to Tabbed Sections but the transition between the tabs is gradual with a fading effect.

%%tabbedAccordion
%%tab-FirstTopic
...
/%
%%tab-SecondTopic
...
/%
/%

Reality check:

Side Accordion#

This accordion variant generates a set of vertical tabs with accordion effect. It is similar to a Tabbed Accordion, but the tabs appear at the left or right side instead of the top of the content.

The Side Accordion is available from v2.8 onwards.

Left side accordion#

%%leftAccordion
%%tab-FirstTopic
...
/%
%%tab-SecondTopic
...
/%
/%

Reality check:

Right side accordion#

%%rightAccordion
%%tab-FirstTopic
...
/%
%%tab-SecondTopic
...
/%
/%

Reality check: