TabbedSections

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.
/%
/%

Some text inside the first tab.
Some other text inside the second tab.

You can use %%tabs and %%pills only in the Haddock Template

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.
/%

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.
/%
/%


Some text inside the first tab.
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.
/%

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.
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.
Some text inside the first tab.
Some other text inside the second tab.