Hi,
I make use of tabs on my Grav website. I noticed that I cannot link to anchors anymore that are not in the first tab. Is there a way to link to a tab? Or better yet, link to an anchor, and the right tab is opened?
An example is the “Zeit-Talks” tab here: Presentaties | Zeitgeistbeweging Nederland
@AquaL1te, Would you mind sharing what I should do to reproduce the issue? What should I expect to see and what will I see instead?
When hovering my mouse over the “Zeit-Talks” tab I see this URL. But when you click on that, it won’t open the tab called “Zeit-Talks”.
Also, if I would link to the second anchor in the tab “Where are we going”, then it won’t open. It will only show the first tab and the content. While I would like to directly show this anchor.
So the issue is that I cannot directly link to a certain tab, or an anchor inside a tab. Only the first tab is always opened. Unless I’m missing something here? How could I fix this?
When hovering my mouse over the “Zeit-Talks” tab I see this URL. But when you click on that, it won’t open the tab called “Zeit-Talks”.
Also, if I would link to the second anchor in the tab “Where are we going”, then it won’t open.
Check out the URLs, there is an anchor in the URL (#). But that’s ignored. Manually browsing to the tab works indeed. But like I try to explain, you cannot directly link to a tab or anchor inside a tab other than the first tab. Please try to link to any of the tabs, it won’t open that tab when you open that link.
So my question is, how can I directly link to a tab (without instructing people to open the tab named “Zeit-Talks”). Furthermore, how can I directly link to an anchor which is inside one of the tabs? Because if I do, it only opens the first tab by default. If that anchor is in the first tab, then it works, if it’s not, then nothing happens.
Does this make it more clear?
What I see is that only the first tab is opened.
And that is what I would expect, because the tabs are opened using javascript that responds to a ‘click’-event added to each tab anchor. Browsing to the page opens the default tab (the first) and will not execute the javascript.
This is indeed what I mean. So, there is really no way to link to a certain tab? Even though the tabs do have anchors? Could this perhaps be a feature request? Also to open the correct tab if that tab includes an anchor. Otherwise, only the first tab is indeed always opened, but no other if that anchor is located outside of the first tab.
@AquaL1te, I guess that if you execute some javascript that first opens the tab and then redirects to the anchor in the new tab, it might do what you want.
@AquaL1te, Did some playing around.
Fresh install of latest Grav 1.7.3
Installed $ bin/gpm install shortcode-core
Installed $ bin/gpm install shortcode-ui
Created new page ‘Tabs’
user/pages
├── 01.home
│ └── default.md
├── 02.typography
│ └── default.md
└── 03.tabs
└── default.md
Add the following to page '/user/pages/03.tabs/default.md:
---
title: Tabs
---
[ui-tabs position="top-left" active="0" theme="lite"]
[ui-tab title="First Tab"]
In tempor sed sapien eu porttitor. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. Quisque et enim vitae orci [placerat tincidunt](#) id ac eros. Fusce et gravida libero.
#### Section 1
<a id="section1" href="#section1" tab="Tab1">Link to Second Tab, section1</a>
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
#### Section 2
<a id="section2" href="#section1" tab="Tab1">Link to Second Tab, section1</a>
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
#### Section 3
<a id="section3" href="#section1" tab="Tab1">Link to Second Tab, section1</a>
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
#### Section 4
<a id="section4" href="#section1" tab="Tab1">Link to Second Tab, section1</a>
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
#### Section 5
<a id="section5" href="#section1" tab="Tab1">Link to Second Tab, section1</a>
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
#### Section 6
<a id="section6" href="#section1" tab="Tab1">Link to Second Tab, section1</a>
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[/ui-tab]
[ui-tab title="Second Tab"]
In tempor sed sapien **eu porttitor**. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. [Quisque et enim](#) vitae orci placerat tincidunt id ac eros. Fusce et gravida libero.
#### Section1
<a id="section1" tab="Tab0" href="#section1">Link to First Tab, section 1</a>
Phasellus cursus odio ex, in mattis lorem tincidunt vel. [Donec nibh odio](#), dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
#### Section2
<a id="section2" tab="Tab0" href="#section6">Link to First Tab, section 6</a>
Phasellus cursus odio ex, in mattis lorem tincidunt vel. [Donec nibh odio](#), dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[/ui-tab]
[/ui-tabs]
<script>
$(document).ready(function() {
/**
* Add handlers to open tabs
* Functionality Is already provided by script 'ui-tabs.js' loaded by plugin shortcode-ui
*/
// $('.tabs-wrapper > ul a[rel="tab"]').click(function(event) {
// event.preventDefault();
// openTab($(this));
// });
/** Add eventhandlers to all anchors pointing to a section */
addLinks();
/** Open a tab pointed to by section link */
function openTab(targetTab) {
targetTab.parent().siblings().removeClass("current");
targetTab.parent().addClass("current");
var targetTabHref = targetTab.attr("href");
$(targetTabHref).siblings().css('display','none');
$(targetTabHref).fadeIn();
}
/** Add events to all sections links to open tab and navigate to section */
function addLinks() {
const links = $('a[tab]');
links.click(function(event) {
const targetTabId = $(this).attr('tab');
const targetTab = $('#' + targetTabId);
openTab(targetTab);
window.location = $(this).attr('href');
});
}
});
</script>
Test in browser
Notes:
tab containing the id of the target tab. Eg. tab="Tab0":<a id="section1" tab="Tab0" href="#section1">Link to First Tab, section 1</a>