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.

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



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

Troubleshooting

• Consider using the Accordion page element instead: WiscWeb - Accordion Panel Page Element