Tabbed Sections#

This JSPWikiStyle allows you to add dynamic tab functionality to your pages, through the use of %%tabbedSection or %%tabs markup.

See also TabbedSectionTag, Accordion

Usage#

The original %%tabbedSection container works in combination with %%tab-tab-name style.
Note: the tab-name may only contain alphanumeric characters or a dash; no other punctuations are allowed, and may not start with a digit.
Use ~CapitalisedWords for multi-word tab names.

%%tabbedSection
%%tab-ThisIsMyFirstTab
Some text inside the first tab.
/%
%%tab-ThisIsMyLastTab
Some other text inside the second tab.
/%
/%

You can now also use %%tabs shorthand markup. Just use simple header markup (!, !!, !!!) to identify a new tab. The weight of the first header is used to match the other tabs. If you want, you can still use headers with another weight inside a tab pane.
Note: since tabs are identified by header markup, such tabs also appear in the TableOfContents. You cannot mix the original and the simplified markup inside one tabbed section.

%%tabs
!This Is My First Tab
Some text inside the first tab.
!This Is My Last Tab
Some other text inside the second tab.
/%

new The %%pills style will give your tabs another layout. You can use it with either the original or simplified markup.

%%pills
%%tab-ThisIsMyFirstTab
Some text inside the first tab.
/%
%%tab-ThisIsMyLastTab
Some other text inside the second tab.
/%
/%

%%pills
!This Is My First Tab
Some text inside the first tab.
!This Is My Last Tab
Some other text inside the second tab.
/%

FAQ#

How can you float content next to a tabbed section ?

Tabs always occupy the full width of the page, and do not allow to float other content next to it. You can of course wrap the %%tabbedSection in an extra block with a reduced width.