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 made up of the articles related to it.

Any number of related articles can be displayed as tabs, and these will be organised into a single row. The content of each tab is provided by the related 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:

1. 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
2. Relate articles to your default article
3. Relate the article from step 1 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.