Not sure if this should be a feature request on the R Markdown GitHub repo, or if it is something that should come from another package with an html template, so apologies if I'm asking this in the wrong place.
At any rate, rmarkdown has this really nice tabset functionality that lets you toggle between tabs, displaying only the currently selected tab and hiding the others. It would be awesome if we could have similar functionality with the the table of contents. I am imagining something like the progressive learnr tutorial format but without runtime shiny, so no interactivity. I just want something that is fairly lightweight and self-contained, which I can kinda sorta approximate using xaringanExtra::use_panelset(), adding the .sideways class, and then keeping all the following sections at a lower header level like so:
---
output: html_document
---
```{r, include = FALSE}
xaringanExtra::use_panelset()
```
# This looks like document title {.panelset .sideways}
## Tab 1 and Section 1
```{r}
plot(cars}
```
### Subsection
More stuff
## Tab 2 and Section 2
```{r}
hist(cars$dist)
```
However, you can't get a fixed or sticky position for the tabs this way or the "title" (it's just an h1 not h1.title, which is excluded from the YAML). This feels like something where your average web developer could throw it together in a few minutes with some javascript that changes section display from none to block, but JS is utterly foreign to me.
Anyone know of an R package that has a template like this or if there is an easy alternative? Maybe a way to strip out the relevant bits from the learnr JS files associated with the default tutorial format to get the same?
Hi. Thanks! That's really helpful. I actually just spent a reckless and downright irresponsible amount of time puzzling over this. I had to learn a little jQuery to figure it out. It also requires knowing how the hash/anchor/id is built into the URL That's because - afaik anyway - the id is built all lower case with hyphen separators, but the "data-unique" attribute is title case with underscores. The latter is evidently used for the URL; hence, having to specify the id manually in curly brackets next to each header. Or, that's what I had to do to get it to work anyway... I'm assuming this solution is brittle as hell, but I really don't understand it well enough to be able to say. Happy to make a feature request on GitHub if you think that would be worthwhile.
---
title: ""
output:
html_document:
toc: true
toc_float: true
toc_depth: 2
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{css, echo = FALSE}
.section.level2 {
display: none;
}
```
```{js, echo = FALSE}
$(document).ready(function () {
$('.section.level2:first').show();
});
// force this to wait till all the other js is loaded
$(window).on('load', function() {
$('.tocify-item.list-group-item').click(function(event){
$('.section.level2').hide();
var id = $(this).data('unique');
$('#'+id).show();
});
});
```
## Outline {#Outline}
This is an R Markdown document.
## R Markdown {#R_Markdown}
This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
```{r cars}
summary(cars)
```
## Including Plots {#Including_Plots}
You can also embed plots, for example:
```{r pressure, echo=FALSE}
plot(pressure)
```
Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.