Flexdashboard: set anchors for ### headings (level3)

user_4822772 0
Viewed 504

In flexdashbard, we can create different headings:

  • Heading level 1: they are pages
  • Heading level 2: we specify Row or Column
  • Heading level 3: tabs

Now for anchors, it seems that we can only set them for heading level 1. As we can see it in this article.

My question is, it is possible to create anchors for tabs (so heading level 3)?

I tried to find a solution. For example, with the following code:

Page 4
=====================================

## Row {.tabset}

### tab 1 {#test1}

### tab 2 {#test2}

The anchor is automatically created for "Page 4" which is #page-4. For "tab 1", I tried to add {#test1}, but it doesn't work.

EDIT: solution with javascript

Another solution that would work for me is to use javascript, to go the the next tab.

First we can add a javascript

<script type="text/javascript">

$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

</script>

Then, we can create buttons to navigate

<a class="btn btn-primary btnNext">Next</a>
<a class="btn btn-primary btnPrevious">Previous</a>

But I testd in R Markdown, it doesn't work.

flexdashboard anchor r
1 Answers

update

I now figured out a way to go from #page-4 #test1 to #page-5 #test4 by clicking a link. I use a bit of javascript to read the URLs parameters. This allows us to define links like a(href="?page5&tab=4"). The javascript will get the parameters, in our case page as 5 and tab as 4 and then execute two clicks, one to get to #page-5 and another one to get the tab 4 called #test4. There are probably better options which allow you to set the active page tab and tabset tab, but I didn't get them working with {flexdashboard}. Anyway, I hope the approach below solves your problem.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill

---


```{r setup, include=FALSE}
library(flexdashboard)
library(htmltools)
```

```{js}
document.addEventListener("DOMContentLoaded", function(){
var url_string = window.location.href;
var url = new URL(url_string);
var page = url.searchParams.get('page');
var pageid = '#page-'.concat(url.searchParams.get('page'));
var tab = 'tab'.concat(url.searchParams.get('tab'));
var tabid = '#test'.concat(url.searchParams.get('tab'));

$('a[href="'+ pageid +'"]').click();
$('a[href="'+ tabid +'"]').click();

});
```


Page 4
=====================================

## Row {.tabset}

### tab 1 {#test1}

```{r}
 tags$a(href = "?page=5&tab=4",
        shiny::actionButton("btn1",
             "go to page-5 tab4"
             ))

```


### tab 2 {#test2}

```{r}
 tags$a(href = "#test1",
        shiny::actionButton("btn4",
             "go to tab1"
             ))

```


Page 5
=====================================

## Row {.tabset}

### tab 3 {#test3}

```{r}
 tags$a(href = "#test4",
        shiny::actionButton("btn5",
             "go to tab4"
             ))

```

### tab 4 {#test4}

```{r}
 tags$a(href = "?page=4&tab=2",
        shiny::actionButton("btn6",
             "go to page-4 tab2"
             ))
```

old answer

In my case your header level 3 anchors ({#test1} etc.) are working even when not using runtime: shiny. You can change the tabs via action buttons, but only if you are on the same page. For example you can from tab1 to tab2 on page 4 but you cannot go from tab1 on page 4 to tab4 on page 5. But changing from page 4 to page 5 is again possible.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill

---

```{r setup, include=FALSE}
library(flexdashboard)
library(htmltools)
```


Page 4
=====================================

## Row {.tabset}

### tab 1 {#test1}

```{r}
 tags$a(href = "#test2",
        shiny::actionButton("btn1",
             "go to tab2"
             ))

 tags$a(href = "#test1",
        shiny::actionButton("btn2",
             "go to tab3 (not working)"
             ))

  tags$a(href = "#page-5",
        shiny::actionButton("btn3",
             "go to page5 (working)"
             ))

```


### tab 2 {#test2}

```{r}
 tags$a(href = "#test1",
        shiny::actionButton("btn4",
             "go to tab1"
             ))

```


Page 5
=====================================

## Row {.tabset}

### tab 3 {#test3}

```{r}
 tags$a(href = "#test4",
        shiny::actionButton("btn5",
             "go to tab4"
             ))

```

### tab 4 {#test4}

```{r}
 tags$a(href = "#test3",
        shiny::actionButton("btn6",
             "go to tab3"
             ))

```
user_93493020
Related