WiscWeb - WordPress UW Theme - Issues with Multiple Tabbed Content Groupings on One Page

The following doc discusses an issue with the Tabbed Content page element whereby you cannot add more than one tab with the same name on a page.

Issue

When adding Tabbed Content groupings to your page, your tabs will error out if you have more than one tab of the same name on the page. The way this error displays will differ, but typically, the second grouping (with the same tab names) will not show content as expected. The most common example is that the first tab of the second grouping will not show up until you click on the tab.

An example is when you want to have more than one tab groupings with the same list of tab names.

First tab group example

Second tab group example

Reason

The Tabbed Content page element is designed to assign an ID (based on the title) to each tab created. If you have more than one tab on the page with the same title, you will have more than one reference on the page to the same ID. Your browser will not know how to interpret this error because it is not valid HTML. Each ID on the page must be unique.


The structure of the tab ID is as follows:
id="tabnameinlowercaseletters - label"

In the example above, where both tab groupings have a tab named "One," both will have the following ID listed:
id="one-label"

Resolution

The best way to resolve this issue is to make sure each tab on the page has a unique title.

For example, if you have tabbed groupings for each semester (titled Spring, Summer, Fall, and Winter), consider adding the year to each tab, as well. This will alter the ID of the tab to make it more unique.

Example

Title for first grouping, first tab: Spring 2020
ID for first grouping, first tab: spring-2020-label

First tabbed group revised example

Title for second grouping, first tab: Spring 2021
ID for second grouping, first tab: spring-2021-label
Second tabbed group revised example

Troubleshooting

  • Consider using the Accordion page element instead:

    In this document:

    Purpose and use

    Accordion Panels allow you to display large amounts of content on a single page by partially displaying the content and hiding the rest behind panels. Users can then click on the panels 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 panels.

    Accordion Panels are available in one- and two-column content layouts.

    Please be aware of these concerns when using accordion panels:

    • You should not use Accordion Panels if you need to directly link to the content of one of the panels.
    • Any information that requires a direct link should be its own page and not a panel.
    • You cannot directly link to a specific panel.
    • Too many panels on a single page could lead to data load issues
    • Do not copy/paste one accordion panel to another without using the Paste as Text option
    • Do not use the same title for multiple panels on a single page

    Accordion panel example

    Adding an Accordion Panel

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

    Using an Accordion Panel

    Accordion Panels have two fields for you to fill out, the title and the text area. The title will appear at the top of the panel and displays when it is open or closed. The text block appears beneath the title and functions the same as the Text Block Page Element. For all of the options available in the Text Block, see WiscWeb - WordPress UW Theme - Text Block Page Element.

    default accordion panel screen in wordpress

    Adding and Rearranging Panels

    There are two ways to add new panels.

    • Add Accordion Panel Button: This button appears at the bottom of all of your panels. Clicking it will add a new panel at the bottom of your Accordion Panels.

    • The Plus (+) and Minus (-) Symbols: On the right side of each panel, mousing over the gray strip will show a plus (+) symbol and a minus (-) symbol. Clicking the plus (+) will add a panel above the panel you've selected, and clicking the minus (-) will add a panel below the panel you've selected.

    Animated image demonstrating adding a new panel

    You can also rearrange the panels 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 panels as they appear on the page. Click and drag the panels to where you want them to appear. For example, if you want the third panel to appear second, navigate to the third panel, click and drag in the left column to above the second panel, and release the mouse. This should move the panel from third to second, and the second panel should now be third.

    Animated image of the process of reordering accordion panels

See Also:




Keywords:tabbed content, multiple, two, more than one, tabs, page element, add, update, same name, issue,   Doc ID:100013
Owner:Jenna K.Group:WiscWeb CMS
Created:2020-04-03 09:17 CDTUpdated:2022-12-01 14:49 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  1   1