TabberLinks

TabberLinks (previously InfoboxTabberLinks) replicates the behaviour that allows you to jump directly to a specific tab by using a hash [[Page#Tab]] or [[#Tab]].

Found an issue? Want to request a feature? Please feel free to post it on the talk page.

Installation[]

Overview[]

TabberLinks was originally made for tabbers in infoboxes, including <panel> and <section> tags, in addition to <gallery> syntax passed through to an <image> tag. By extension it works with Lua module-created tabbers. This feature was never present in portable infoboxes (either because it never existed, or because it was removed at some point).

As of December 2023, it also fixes tabbers (regular and otherwise) no longer being automatically scrolled to when they're linked to using their hash. This used to be a built-in behaviour, but was removed by Fandom for whatever reason. Note that without the script, you can still wrap your content in an element with your tab name as the ID, e.g. My Tab=<div id="My_Tab">...</div>, as tabbers will still automatically switch, and ID anchors are still scrolled to. This script just makes it easier, faster, and scrolls to the tab itself instead of the tab content.

The script has the following features:

Automatically switches to the tab specified by the URL hash when the page is loaded, and when the hash changes (i.e. by clicking a self-anchor link on the page).
Automatically scrolls to a tab when it is switched to, but only if it is not currently within view. You can force it to scroll with alwaysScroll below.
Makes use of history states created by Tabber, switching the tab when the user clicks the back and forward buttons in their browser. Unfortunately the addition of the history states themselves cannot be disabled.
Allows linking to ID's contained within any tabs, including elements within tabs and nested tabs. Doing so will switch to all tabs that are an ancestor of the element with the ID before scrolling to it.

Configuration[]

A few optional configuration fields are available by setting them in window.tabberLinks:

luaTabberOnly (defaults to false): If true, only modifies tabbers created by Global Lua Modules/Tabber, and not infobox panels/galleries.
scrollToTab (defaults to true): If true, linking to a tab on the page (by means other than clicking on the tab) will also scroll to the tabber, assuming it isn't already on the screen (controlled by alwaysScroll below). This is not a feature in tabbers by default.
alwaysScroll (defaults to false): If true, scrolling occurs when linking to a tab, even if the tab is already on the screen. Note that switching to a tab by clicking on it will never scroll to the tab.
neverScroll (defaults to false): If true, the script will switch tabs, but will never automatically scroll. This takes precedence over alwaysScroll.
descendantSwitching (defaults to true): If true when the page hash points to an element that is contained within a tab that isn't active, said tab will be switched to (including further tabs up the hierarchy). This doesn't apply to just infobox tabbers necessarily, and is a quality-of-life feature that can assist with linking to content within tabbed layouts.
prioritizeIds (defaults to false): If true, when using a hash that matches both a tab's data-hash, and an element's ID, the element will be scrolled to instead of the tab. This behaviour is reversed when prioritizeIds is false.

window.tabberLinks = {
    luaTabberOnly: false,
    scrollToTab: true,
    alwaysScroll: false,
    neverScroll: false,
    descendantSwitching: true,
    prioritizeIds: false
};

Examples[]

Regular tabber[]

Jump to "AAA" • Jump to "BBB" • Jump to "CCC" within "BBB" • Reload page to "BBB"

Text in AAA!

Text in BBB!

Text in CCC!

Lua tabber[]

Jump to "Foo" • Jump to "Bar" • Jump to "Abc" within "Bar"

Foo
Bar

Some example data

Some more example data Abc

Infobox[]

Jump to "Baz" • Jump to "Qux" • Jump to "Def" within "Qux"

Notes[]

Switching isn't done via id's, and is instead handled via data-hash attributes on tabs. This means if you have an ID on the page that matches a label in any tabber handled by this script, the browser may scroll to that ID instead of the tab (or vice versa). This script will try to prioritize tabs first where possible. If this behaviour isn't desired, you can disable it with prioritizeIds.
Because tabbers are "flattened" on mobile, they will no longer be able to be linked to using this script. You can either use a Lua Tabber, or wrap your tab content in a div with the same ID as your tab's hash, e.g. when using a tab SomeTab=, wrap the content of the tab in a <div id="SomeTab">...</div>.
Be aware that the IDs created by tabber will include any trailing spaces! So if your tab name in tabber is SomeTab = , the ID will be SomeTab_.
May not work correctly in the VisualEditor, or in the VisualEditor in source mode.

TabberLinks

Contents

Installation[]

Overview[]

Configuration[]

Examples[]

Regular tabber[]

Lua tabber[]

Infobox[]

Notes[]

Dependencies[]