Tabs Panels

The tabs panel displays a series of tabs, each of which reveals article content beneath the row of tabs when clicked.

The tabs panel displays its article heading and summary in the same way as standard article panels, followed by a series of tabs, each of which reveals article content beneath the row of tabs when clicked.

Any number of tabs can be displayed, and these will be organised into a single row. The content of each tab is provided by the target article as follows:

• The article's heading provides the title text for each tab, and is displayed in the tab content area when that tab is selected
• The article's summary appears beneath the title
• If an article has an image, a suitably sized version appears next to the summary
• An icon for the tab
• A button to view the full article with the text "See More"

A default icon for each tab in a panel can set by the page on which the panel appears, rather than setting each tab icon individually.

Additional styles can be applied to the panel using metadata values reflected in the site's CSS.

At narrow widths (ie mobile devices), tabs are stacked vertically and form an accordion style menu. Tabs can be opened and closed by clicking on them, showing and hiding the tab content.

Creating Tabs Panels

To create a tabs panel, relate the "tabs" panel metadata value to a default article. This article will become a panel that displays the articles related to it in a series of tabs.

Relate the article with the "tabs" metadata to an article that uses the Panel template.

To set a default icon for all of the tabs in all of the panels on a Panel template article, relate an image of the "rollover image" media type to the Panel template article.

The icons of individual tabs can be set by relating a "rollover image" to the article that provides the content for that tab.