WiscWeb - WordPress UW Theme - Tabbed Content Page Element

The Tabbed Content page element allows you to have a series of editable, conjoined tabs on a page. Each tab displays the content within that tab, while other tabs remain hidden until they are selected. This functions similarly to tabs in a web browser. For an example, see the WiscWeb website.

In this document:

Purpose and use

The Tabbed Content Page Element allows you to display large amounts of content on a single page by partially displaying the content and hiding the rest behind tabs. Users can then click on the tabs to see the rest of the information. This Page Element works best when the content naturally divides into sections, which an be used as the different tabs

Be aware of these best practices when using the Tabbed Content page element:

Adding Tabbed Content

  1. Navigate to the page on which you want to add Tabbed Content.
  2. Scroll to the Primary Content Area and the Layout on which you want to add Tabbed Content.
  3. At the bottom of that Layout, click on Add Page Element.
  4. On the Page Element list, click on Tabbed Content.

Using Tabbed Content

Tabbed Content has two fields for you to fill out, the Tab Title and the Tab Body. The title will appear at the top of the tab and displays when it is open or closed. The tab body is a text area and the content appears beneath the title and functions the same as the Text Block Page Element. 

tab content as it displays within wordpress

Adding and Rearranging Panels

There are two ways to add new panels.

You can also rearrange the tabs after you've added them. To do this, mouse over the left column and you'll see numbers appear. These numbers coincide with the order of the tabs as they appear on the page. Click and drag the tabs to where you want them to appear. For example, if you want the third tab to appear second, navigate to the third tab, click and drag in the left column to above the second tab, and release the mouse. This should move the tab from third to second, and the second tab should now be third.

Animaged image of adding, removing, and reordering tab panels

See Also: