3

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.

John Smith
  • 1,604
  • 4
  • 18
  • 45

1 Answers1

2

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

```
TimTeaFan
  • 17,549
  • 4
  • 18
  • 39
  • Thank you for your answer. but I don't use shiny, and it seems that with static html files (flexdashboard generated with rmarkdown::render), the tag "#section-test1" doesn't exist. "#test1", but when specifying in the url, the corresponding tab isn't showing up. – John Smith Nov 07 '20 at 10:15
  • Now I removed `runtime: shiny`. Turns out, the prefix `section-` was added by `shiny`. In my case the example above is working when rendered as HTML. However, it is still not possible to go from `page 4` `tab1` directly to `page 5` `tab4` but changing tabs on the same page and changing from one page to another is working. The example above uses {shiny}s `actionButton`, but you can basically wrap the `tags$a(...)` around anything. – TimTeaFan Nov 07 '20 at 10:43
  • Thank you TimTeaFan, the buttons work fine. but when I put direct the # in the url, for example "link_flexdashbord.html#test3", it won't work. Do you why? Thank you – John Smith Nov 08 '20 at 09:58
  • The problem you are describing is the same to what I pointed out above. If the website shows `page-5` you can enter the URL `"link_flexdashbord.html#test4` and it will open up the correct tab, but when `page-5` is not open this won't work. I have an idea to make this possible using javascript and I will post an update once I got it working. – TimTeaFan Nov 08 '20 at 11:42
  • 1
    @Xiaoshi: I updated my answer with a new approach, please have a look. – TimTeaFan Nov 08 '20 at 21:11