bookdown: cross-referencing content in tabbed section - html

Question

I'm working on a single RMD file with 'output: bookdown::html_document2'. I noticed that when cross-referencing to figures in tabbed sections (e.g. # Header {.tabset}), clicking on the link works nicely for content in the first tab but not for any of the following tabs. I mean, clicking on the number linking to the figure in the second tab does not open/activate the second tab.
Among the tons of questions regarding cross-referencing, I was not able to find any dealing with the same problem. I'm afraid that it might just not be possible to 'activate' a tab by clicking on a cross-reference, but I do hope to find some workaround. I'm happy about any hints.
Here's a minimal example:
---
title: "Untitled"
date: "17 2 2021"
output:
bookdown::html_document2:
number_sections: FALSE
---
# First section {.tabset}
## Subsection 1
```{r plot1, fig.cap="A first figure"}
plot(cars)
```
## Subsection 2
```{r plot2, fig.cap="A second figure"}
plot(cars)
```
# Second section
Here I want to cross-reference Figures \#ref(fig:plot1) and \#ref(fig:plot2)
```

Answer 1

If we take a look at the final html created, the "figure number link" is a normal html anchor tag linking to the image itself, so clicking on it the page will be scrolled to the figure position, without activating the containing tab.
As suggested by #cderv I would add some js code in order to achieve your desired result.
First of all I would work on naming:
set a naming convention for images contained in tabs (e.g. simply adding a fixed prefix "TBIMG-")
set a naming convention for tabs containing this kind of images (e.g. another custom prefix "TBTAB-" + figure name)
So we'll end up having images with name "TBIMG-name1", "TBIMG-name2", etc.. contained in "TBTAB-name1", "TBTAB-name2", etc.
Now we just need to bind the functionality to the click event of "figure number links" (only the ones having our special prefix).
In their href attribute we'll find the image id.
This one can lead us to the containing tab (using our second custom prefix)
Then we just activate the tab and finally we scroll the page to the tab itself.
Here's the JS code you need to add:
$(document).on("click", 'a[href^="#fig:TBIMG"]', function(event){
//this in order to prevent the page to scroll to the image itself
event.preventDefault();
//from the img name we build the tab name
var tabKey = 'TBTAB' + $(this).attr('href').replace('#fig:TBIMG', '');
//set the tab active
var tabPlc = $('.nav[role="tablist"] a[href="#' + tabKey + '"]')
tabPlc.tab('show');
//the page scrolls to the tab containing the image
$("html, body").animate({ scrollTop: tabPlc.offset().top }, 700);
});

Answer 2

Maybe this could help you:
---
title: "Untitled"
date: "17 2 2021"
output:
bookdown::html_document2:
number_sections: FALSE
---
# First section {.tabset}
## Subsection 1
```{r plot1, fig.cap="A first figure"}
plot(cars)
```
## Subsection 2
```{r plot2, fig.cap="A second figure"}
plot(cars)
```
# Second section
Here I want to cross-reference Figures [1](#subsection-1) and [2](#subsection-2)
The links are good, but not working on Firefox neither Chromium. I dot not know why it does not refresh the window when we click on the link.
Here is the Html code that works to activate the tab (Subsection 2) (I do know how to implement it here, sorry):
<a role="tab" data-toggle="tab" href="#subsection-2" aria-controls="subsection-2" aria-expanded="true">Subsection 2</a>