Category: General

Tabbed Sections

This JSPWiki Style allows to add tabbed sections to your wiki pages,
similar to the ones used in edit or page-info mode.
The formatting of the tabs can be customised in the jspwiki.css.

Usage

Surround all tabbed sections with a __%~%tabbedSection__ [JSPWiki Style.
Next, start each tabbed section with a [JSPWiki Style prefixed with __”tab-”__
such as %’~%tab-~ThisIsMyFirstTab .. %~%.
You can only use alphanumeric characters and a dash in the name of your tabs
(no other punctuation), the name of the tab may not start with a digit.
(css class name restrictions)

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

%%tabbedSection

%%tab-ThisIsMyFirstTab
Some text inside the first tab.
%%

%%tab-ThisIsMyLastTab
Some other text inside the second tab.
%%

%%

Reality check:

%%tabbedSection

%%tab-LoremIpsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus odio. Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. Cras aliquet nibh sit amet tortor. Nam nunc.
%%

%%tab-NullamSodales
Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. %%

%%tab-Cras
Cras aliquet nibh sit amet tortor. Nam nunc.
%%
%%

 

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count: