Tabs can be used to hide content but, unlike drawers, one content area must always be visible. The best use for tabs is to display either/or content – where only one could apply. For example:
Instructions:
Freshmen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu elementum ligula. Aliquam tempor quam augue, sed imperdiet sem scelerisque vel. Mauris fringilla mi non velit ultricies venenatis id eget enim. Pellentesque sit amet purus ligula. Cras laoreet finibus nisl vel lobortis. Morbi sodales eros vel condimentum venenatis. Aenean ut malesuada orci, sed aliquet lacus. Mauris elementum, quam sed dictum varius, eros tortor congue ante, ut placerat dui ligula eu lectus.
Sophomores
Donec facilisis vitae mi at lobortis. Donec id odio accumsan sem molestie aliquam a nec orci. Quisque cursus pulvinar ipsum non placerat. Proin dapibus condimentum velit, blandit sollicitudin eros posuere sed. Nam at aliquam erat. Sed non aliquet felis. Vivamus luctus ligula eu iaculis laoreet. Cras et nunc ut massa rhoncus blandit eu non ligula. Ut eros velit, posuere at bibendum eget, auctor vitae tellus. Sed a gravida tellus, non sollicitudin eros. Nunc ultrices quam sem, a efficitur felis vestibulum nec.
Juniors
Etiam eget scelerisque tellus, eget aliquam magna. Donec a dignissim ipsum, ut lobortis dui. In quis augue eu nisi sollicitudin tincidunt. Maecenas ut sagittis nisl, id condimentum neque. Pellentesque nec urna hendrerit, luctus lacus in, placerat nulla. Mauris ante eros, dictum vulputate magna eu, hendrerit tempor tortor. Nulla ut purus interdum, sollicitudin dui quis, iaculis neque. Nam vehicula mi tellus, quis molestie lorem gravida at.
Seniors
Integer sollicitudin dolor nec elit ullamcorper fermentum. Nulla facilisi. Maecenas mauris tortor, pellentesque sed vulputate at, tincidunt sed libero. Etiam in tempor dolor, non tincidunt metus. Vivamus consectetur justo vel imperdiet vestibulum. Etiam consectetur, eros sit amet lobortis rutrum, mi nunc ultricies urna, quis feugiat enim risus posuere ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at elementum mauris. Sed dapibus efficitur aliquet. Etiam id est eget lectus tincidunt suscipit. Sed auctor diam a consectetur auctor.
Notes on Using Tabs
Tabs are created using the tabgroup and tab shortcodes. Each tab is required to have a label attribute set.
When you use tabs, pay special attention to how well your tabs work on mobile. The example above (four tabs, one word each) is about as much as you can display on a mobile device.
It also becomes difficult on a mobile device to know where the tab ends. It might be best to put your tabgroup inside a band to give it more vertical whitespace above and below.
Tabgroup Attributes
The tabgroup shortcode has no attributes.
Tab Attributes
| Name | Possible Values | Required | Notes |
|---|---|---|---|
| label | text | Yes | The tab’s label |
Code Sample
[tabgroup][tab label='Freshmen'] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu elementum ligula. Aliquam tempor quam augue, sed imperdiet sem scelerisque vel. Mauris fringilla mi non velit ultricies venenatis id eget enim. Pellentesque sit amet purus ligula. Cras laoreet finibus nisl vel lobortis. Morbi sodales eros vel condimentum venenatis. Aenean ut malesuada orci, sed aliquet lacus. Mauris elementum, quam sed dictum varius, eros tortor congue ante, ut placerat dui ligula eu lectus. [/tab][tab label='Sophomores'] Donec facilisis vitae mi at lobortis. Donec id odio accumsan sem molestie aliquam a nec orci. Quisque cursus pulvinar ipsum non placerat. Proin dapibus condimentum velit, blandit sollicitudin eros posuere sed. Nam at aliquam erat. Sed non aliquet felis. Vivamus luctus ligula eu iaculis laoreet. Cras et nunc ut massa rhoncus blandit eu non ligula. Ut eros velit, posuere at bibendum eget, auctor vitae tellus. Sed a gravida tellus, non sollicitudin eros. Nunc ultrices quam sem, a efficitur felis vestibulum nec. [/tab][/tabgroup]