Prevent TOC from collapsing (returning to top) when using tabs in rmarkdown

619 Views Asked by At

In rmarkdown, when using a floating TOC and nested tabs I have come across an issue where the TOC goes back to the 'top' tab. For example, If I am viewing the Even more details about Bar here subtab within the Bar tab and I click on the content in TOC for within that subtab, it then proceeds to collapse the TOC and goes back to the 'top' tab. Alternatively, if I click on the header for a subtab within the TOC, the TOC will collapse back to the 'top' tab once I began to scroll. Example code below.

Is it possible to prevent the "unrequested" collapsing of the TOC / returning to the 'top' tab, anchor the TOC to the current tab or subtab? Or, is it possible for the TOC to only display TOC items for the current tab or subtab to prevent this issue?

---
title: "test"
author: "tester"
date: "10/1/2020"
output:
  html_document:
    toc: true
    toc_float: true
    toc_collapsed: false
    number_sections: false
    toc_depth: 3
    theme: united
    code_folding: hide
---


<style type="text/css">

body{ /* Normal  */
      font-size: 16px;
  }
  
h1.title {
  font-size: 38px;
  color: DarkRed;
}
h1 { /* Header 1 */
  font-size: 28px;
  color: DarkGrey;
}
h2 { /* Header 2 */
    font-size: 24px;
  color: DarkGrey;
}
h3 { /* Header 3 */
  font-size: 20px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlue;
}

table, td, th {
  border: none;
  padding-left: 10px;
  padding-right: 1em;
  min-width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}
</style>


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)

```
# FooBar {.tabset .unlisted}

## Foo {.tabset}
### More Details about Foo here
<h2> Foo Details </h2> 
<h3> Foo Reference  </h3>
1. Foo book

***
<h3> Foo styles </h3>
<h3> *First* </h3>
Very fun example.

<h3> *Second*</h3>
Equally fun.

<h3>*Third*</h3>
Almost as fun.

***
<h3>Foo Process</h3>
<h3> *Process prep*</h3>
1. Put it all together.

### Even more Details about Foo here
<h2> Foo Details 2 </h2> 
<h3> Foo Reference 2  </h3>
1. Foo book 2

***
<h3> Foo styles 2 </h3>
<h3> *First 2* </h3>
Very fun example 2.

<h3> *Second 2*</h3>
Equally fun 2.

<h3>*Third 2*</h3>
Almost as fun 2.

***
<h3>Foo Process 2</h3>
<h3> *Process prep 2*</h3>
1. Put it all together 2.

## Bar {.tabset}
### More Details about Bar here
<h2> Bar Details </h2> 
<h3> Bar Reference  </h3>
1. Bar book

***
<h3> Bar styles </h3>
<h3> *First* </h3>
Very fun example.

<h3> *Second*</h3>
Equally fun.

<h3>*Third*</h3>
Almost as fun.

***
<h3>Bar Process</h3>
<h3> *Process prep*</h3>
1. Put it all together.

### Even more Details about Bar here
<h2> Bar Details 2 </h2> 
<h3> Bar Reference 2  </h3>
1. Bar book 2

***
<h3> Bar styles 2 </h3>
<h3> *First 2* </h3>
Very fun example 2.

<h3> *Second 2*</h3>
Equally fun 2.

<h3>*Third 2*</h3>
Almost as fun 2.

***
<h3>Bar Process 2</h3>
<h3> *Process prep 2*</h3>
1. Put it all together 2.


***
<h3>Additional Item</h3>
<h3> *Make longer*</h3>
To demonstrate my issue.

<h3>Additional Item2</h3>
<h3> *Make longer2*</h3>
To demonstrate my issue2.

<h3>Additional Item3</h3>
<h3> *Make longer3*</h3>
To demonstrate my issue3.

<h3>Additional Item4</h3>
<h3> *Make longer4*</h3>
To demonstrate my issue4.
0

There are 0 best solutions below