This is version . It is not the current version, and thus it cannot be edited.
[Back to current version]   [Restore this version]

Accordion Section#

Accordion#

This JSPWikiStyle allows you to add horizontol 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 two accordion types:

  • %%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

--DF, Jan 07, originally part of BrushedTemplate, part of JSPWiki since 2.5.80.

Vertical Accordion#

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

Enclose all tabs with a %%accordion and start each tab with %%tab-<tab-name>. The name of a tab may only contain alphanumeric characters and a dash; (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:

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. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu. Praesent vel augue vel dolor ultricies convallis. Nam consectetuer risus eu urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam suscipit. Duis quis lacus sed tellus auctor blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget massa in ante vehicula pharetra. Ut massa pede, ornare id, ultrices eget, porta et, metus.
  • Vestibulum ante ipsum primis ...
  • Ut molestie nunc eu turpis. ...
  • Donec facilisis enim sed dui.

Tabbed Accordion#

This JSPWikiStyle 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:

This is the first tab#

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. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.

This is the second tab#

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu. Praesent vel augue vel dolor ultricies convallis. Nam consectetuer risus eu urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam suscipit. Duis quis lacus sed tellus auctor blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget massa in ante vehicula pharetra. Ut massa pede, ornare id, ultrices eget, porta et, metus.

This is the short third tab#

  • Vestibulum ante ipsum primis ...
  • Ut molestie nunc eu turpis. ...
  • Donec facilisis enim sed dui.

Add new attachment

Only authorized users are allowed to upload new attachments.
« This particular version was published on 07-Oct-2007 10:54 by DirkFrederickx.