Tabbed Boxes

The tabbed box content item allows you to create a box similar to a file folder with up to ten tabs. When users click on a tab, they will be shown the information associated with it.

Any content allowed in a normal body content type (such as text, bulleted lists, images, and tables) is allowed in any of the tabs.

In order for the content type to work properly, each tab used must have both a tab name and content to show. Leaving out either of these fields will cause the tabbed box to not build correctly.

The first two tabs are required; however, tabs 3-10 are optional and do not need to be filled in.

  • Lorem ipsum
  • Mauris varius
  • Proin porta
  • Morbi pretium
  • Nunc rutrum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eget erat sollicitudin porta in et elit. Sed blandit ante ac auctor tincidunt. Pellentesque lectus odio, venenatis sit amet massa vitae.

  • Varius aliquet
  • Neque aliquam
  • erat volutpat

Varius aliquet nequeAliquam erat volutpat. Fusce sit amet orci nec dolor facilisis consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac facilisis orci, at rhoncus tortor. Cras eget tellus ac nisl elementum tincidunt.

Mauris varius

Mauris varius semper risus, sed gravida purus placerat id. Proin venenatis ultrices odio non sodales. Cras facilisis dignissim diam, at convallis justo mattis a. Proin eleifend nisi ante, feugiat cursus dolor pretium vel. In hac habitasse platea dictumst. Phasellus id velit ac orci luctus cursus non vel velit. Donec ac massa pulvinar, tempus erat id, tincidunt nisi. Phasellus at semper ligula, quis interdum arcu. Integer laoreet tortor condimentum mi blandit, a semper odio posuere. Sed lectus mauris, semper et mauris viverra, pulvinar eleifend sem. Suspendisse potenti. Vestibulum eu lectus ac magna tincidunt dapibus. Quisque elementum pretium diam, vitae pellentesque lacus porttitor ut. Praesent volutpat vehicula sem faucibus lobortis. Sed tempor sapien id felis posuere vehicula. Mauris turpis tortor, iaculis in enim id, pretium ultricies elit.

Proin porta

Proin porta nisl dui, eget facilisis lectus tincidunt non. Morbi suscipit suscipit sem quis vestibulum. Donec sodales purus dolor, et ornare urna sodales non. Curabitur a suscipit leo. Nam sed ultricies est, quis posuere risus. Nunc at massa tempus, venenatis erat eu, convallis elit. Praesent auctor massa mi, et pretium arcu rhoncus et. Vestibulum vitae nisl odio. Nunc euismod urna quis ante scelerisque, eget tristique nulla consequat. Duis eleifend viverra urna at ultrices. Morbi scelerisque semper nisi, et varius eros auctor id. In adipiscing posuere magna, vel dictum mauris dignissim quis.

Morbi pretium

Morbi pretium turpis vel lorem pharetra scelerisque. Duis eleifend, arcu quis ultricies porttitor, dolor magna mollis purus, eu pellentesque mi mi non neque. Aenean lacinia rhoncus facilisis. Sed tempor nulla at risus pulvinar, non sollicitudin mauris gravida. Sed quis risus vehicula, fermentum metus sed, posuere turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam justo massa, fringilla non placerat sed, tempus tristique nulla. Cras posuere, lacus scelerisque molestie euismod, dolor odio blandit lectus, sed malesuada libero nisi et ante. Nulla vitae dignissim elit. Cras vitae dolor ut tellus placerat laoreet sed sed mi. Sed at nunc rutrum, condimentum nulla at, laoreet ante.

cell cell cell cell
cell cell cell cell
cell cell cell cell

Nunc rutrum

Nunc rutrum, lectus sed suscipit sollicitudin, tortor tortor tincidunt turpis, at gravida nisi orci quis tortor. Suspendisse potenti. Aenean massa velit, eleifend sodales ante in, luctus sollicitudin lectus. Integer eleifend hendrerit elit vitae viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sit amet nunc at dui tincidunt molestie id vitae neque. Vivamus dignissim pharetra vehicula. Duis nec feugiat nunc. Duis pharetra diam dolor. Pellentesque a ullamcorper enim. Nunc et lectus dapibus, vestibulum augue vel, ultrices felis. Maecenas congue elit quis rutrum condimentum. Curabitur ornare dolor nulla, bibendum convallis risus posuere in. Nam vitae velit vel libero iaculis tempor. Aenean in adipiscing neque.

Adding a Tabbed Box

To add a tabbed box content item to your page, click "Add Content to Current Page" in the top bar of your Direct Edit window and select "Tabbed Box."

Adding the tabbed box content item

You will be presented with the following editing window:

Tabbed box editing window

Please fill in the "Name" box with a unique name for the content item. This field will not show up anywhere on your finished page.

For each tab you would like to have in your tabbed box, fill in a tab name and then content for that tab. Any content normally allowed in a body content item is allowed inside the tab's content area.

When you are finished, press "Add" or "Update" at the top or bottom of your editing window.