Linking to Tabs in Confluence Can Get Tricky

I have found that it is very useful to work with tabs in Confluence, because it helps to organize the content in a concise manner, and it also reduces the mental clutter in a reader’s head by allowing them to seamlessly just click on the tab respective to the information they were specifically looking for, without having to skim through all the content before they find what they were actually looking for. 

When documenting content using Confluence, I add the Localtab Group macro in a page, and thereafter I add multiple Localtab macros nested within it, based on the number of tabs that I need to create in the Confluence page. In addition, you can optionally define whether you need your tabs to appear vertically or horizontally, specify which tab is active when the page loads, and also specify a unique ID for each of the tabs.  

Linking to a tab from a different page in Confluence is rather straightforward, because all you need do is to make sure to add a unique “Link ID” to the tab, so that the tab reference will be unique among the other tabs that are available in the page, and then use one of the following URL formats, based on your use case. 

• URL format when linking to a tab in the same Confluence space.
  [page-name]#[tab-link-ID]
• URL format when linking to a tab in a different Confluence space.
  [space-key]:[page-name]#[tab-link-ID]

I found it rather tricky at first when trying to link to tabs that are within the same page. The following are two use cases that I had when trying to link to tabs that were in the same page in Confluence.

• Linking from one tab to another tab, which belongs to the same group of tabs within the same page in Confluence.
• Linking to a tab from outside the group of tabs, but within the same page in Confluence.

I was surprised to learn that the latter mentioned URL formats did not work when trying to achieve the above mentioned use cases. Even adding an Anchor macro within a tab and linking to the anchor, so that the user will automatically get linked off to the respective tab did not work. Finally, I learnt that I needed to tweak the following code snippet and add it within an HTML macro to make the links to work.

<a id=“[ANY_ID]” onclick="document.getElementById(‘[TAB-ID]’).click()”>[TEXT_FOR_THE_LINK]</a>

Example: 

<a id=“2000” onclick="document.getElementById('aui-uid-0').click()">Upgrading from API-M 2.0.0 to API-M 2.1.0</a> 

Note that the “tab ID” is different to the “Link ID”, which we add as a unique identifier to each tab. The “tab ID” refers to the generic ID of a tab, which you can identify by inspecting the page in the browser. Generally, the tab IDs are as follows: 

• First tab - aui-uid-0 
• Second tab - aui-uid-1 
• Third tab - aui-uid-2

Try it out

Let’s add a link in the “Upgrading from 1.8.0/1.9.0/1.9.1 to 2.1.0” tab that navigates the user to the “Upgrading from 2.0.0 to 2.1.0” tab, where both the latter mentioned tabs are in the “Upgrading from the Previous Release” page.

Instructions

1. Click Edit to go to the edit view of the page in Confluence.
2. Navigate to the section that has the Localtab macro with the title “Upgrading from 1.8.0/1.9.0/1.9.1 to 2.1.0”.
3. Add an HTML macro under step 2 in the "Upgrading from 1.8.0/1.9.0/1.9.1 to 2.1.0" tab as shown in the screen shot.
4. Add the following code within the HTML macro.
   <a id=“2000” onclick="document.getElementById('aui-uid-0').click()">Upgrading from API-M 2.0.0 to API-M 2.1.0</a>
   

   

   Edit View

   The above code uses the following code format.
   <a id=“[ANY_ID]” onclick="document.getElementById(‘[TAB-ID]’).click()”>[TEXT_FOR_THE_LINK]</a>
   Note the following.
• [ANY_ID] - I have added 2000 as the ID, but you can add any string as the ID.
• [TAB-ID] - I have added aui-uid-0 as the tab ID because I wanted to link to the very first tab, which in this case is the “Upgrading from 2.0.0 to 2.1.0” tab.
5. Click Save.

Published View

To see how the above mentioned example works go to the “Upgrading from the Previous Release” page, which is in the WSO2 API Manager 2.1.0 documentation, and click on the “Upgrading from API-M 2.0.0 to API-M 2.1.0” link under step 2. You will be redirected to the "Upgrading from 2.0.0 to 2.1.0” tab as expected.

. . .

I hope that this article was useful to you. Please do share any tips that you may have discovered over time when working with tabs in Confluence.

---

Acknowledgements

• A big thank you goes out to Imesh Gunaratne, who took the time amidst his busy schedule to research and come up with a suitable code to link to a tab within the same page.
• Photo by Manuel Sardo on Unsplash.
• HTML code blocks were formatted using hilite.me

---

References

The following products/add-ons have been referred to in this article.

• Atlassian Confluence 6.0.7
• Localtab Group and Localtab macro  - Navitabs add-on 4.5.0
• HTML Macro