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

Accordion Section#

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. The opening or closing of tabs happens in a smooth animated way.

There are two accordion types:

  • %%accordion: standard accordion with tabs positioned vertically. (example) This is great for LeftMenu's
  • %%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, part of BrushedTemplate

Accordion#

This JSPWikiStyle generates a set of vertical tabs with accordion effect. With only one tab, you can use this as a replacement of a collapsable box

Enclose all accordion tabs with a %%accordion and start each tab with a JSPWikiStyle prefixed with tab- such as %%tab-FirstTab. The name of your tabs may only contain alphanumeric characters and a dash. (no other punctuations), It can 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:

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.

Tabbed Accordion#

This JSPWikiStyle generates a set of horizontal tabs with accordion effect. It is similar to BrushedTemplateTabbedSections 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.

Implementation#

Based on the Accordion plugin of Mootools Javascript Library, with some enhancements to support dynamic height and width of the tab contents.

Add new attachment

Only authorized users are allowed to upload new attachments.
« This particular version was published on 04-Mar-2007 23:05 by DirkFrederickx.