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.
