bookdown: cross-referencing content in tabbed section

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)
```

For reference, this has also been posted in Github github.com/rstudio/bookdown/issues/1081 It is not currently a supported feature, and this needs some JS magic to work I believe — cderv

luca_crd luca_crd · Accepted Answer · 2021-02-24T07:21:33

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);
});

bookdown: cross-referencing content in tabbed section

2 Answers