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 Style
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.
Note: since tabs are in this case identified by header markup, such tabs also appear in the TableOfContents. You cannot mix the original and the simplied markup styles in 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.
/%
Some text inside the first 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.
/%
Some text inside the first 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.
