Skip to main content
Are you okay? Emergency/Crisis UOIT Home

Tabbed content

Tabbed content example

Tabs are elements that allow you organize and navigate blocks of content that are broken into logical sections. Clicking on a tab heading will show the content associated with that heading. A tab consists of a heading (title) and it's content.

You can have multiple tabs on a page, but keep in mind the width of the page when creating additional tabs - if the tab headings do not fit in the available space, they will drop below the first "row" of tabs, which isn't visually pleasing. If you must have more tabs, consider using accordions instead, or splitting the content into multiple pages. Tabbed content preview screenshot

How to create tabbed content:

  1. Create a new page or edit an existing page.
  2. In the Content type section of the page editor, select the Tabbed content option. The tabs editor will appear. Tabs editor preview

  3. Enter the first tab heading in the Tab title field and the content for that tab in the Tab content WYSIWYG editor.
  4. To create another tab, click the green plus icon underneath the Tabbed content > Tab section label. Another tab editor will appear. Continue adding tabs as required. Adding Tabs Screenshot

  5. You can reorder tabs by clicking on the navy upwards/downwards arrows for each tab. Delete a tab by clicking on the red minus icon.Re order and delete tabs screenshot

Tip: expand and collapse individual tab editors as you are working in the page editor to minimize the visual clutter on the screen.