Rmarkdown: Placing static content under a tabbed section

Question

I was hoping for help placing static content under a tabbed section in my R markdown file. It's similar to this question: RMarkdown: Tabbed and Untabbed headings, but the solution doesn't account for blank lines in the table of contents.

Is it possible to end the tabbed section without starting a new section? Here's an example:

---
title: "Mtcars Example"
output: 
  html_document:
    toc: true
    toc_float: true
    number_sections: true
---

# Mtcars Info
The data was extracted from the 1974 Motor Trend US magazine..

# Dataset Prep
No changes were made to the dataset..

# Plots {.tabset .tabset-pills}
```{r results = 'hide', message = FALSE, fig.height = 5, fig.width = 5, echo = FALSE}
    plot1 <- ggplot(data = mtcars) + 
            geom_point(aes(x = mpg, y = hp))
    plot2 <- ggplot(data = mtcars) + 
            geom_point(aes(x = mpg, y = wt))
```  

## mpg vs hp  
```{r, echo = FALSE}
plot1
```  

## mpg vs wt  
```{r, echo = FALSE}
plot2
```  

#
The plots above show how mpg is related.. 

# Analysis
the mtcars dataset is a great exploratory dataset to show..

Section 3 is a tabbed section allowing the user to switch between plots. I'd like to have static text underneath it.

The problem is, without starting a new heading, the content is only visible when the 2nd tab is selected. Not good. I can fix this by starting a new heading and putting the content in there.. but now I have a numbered section 4 in my table of contents that's blank. Also not desirable.

Is there any way to fix this? In the Rmarkdown cheatsheet https://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf, you supposedly can end a tabbed section with ###, but that doesn't seem to work either.

Martin Schmelzer · Accepted Answer · 2017-05-03T21:56:28.850

I am not sure about any built-in solution. In such cases I usually just go with jQuery. In this case, it is a one-liner.

Reproducible Example:

---
title: "Mtcars Example"
output: 
  html_document:
    number_sections: true
---

<script>
$(document).ready(function() {
  $('#myDiv').appendTo('#first-tab-sec');
});
</script>

<div id="myDiv">a
The quick brown fox jumps over the lazy dog.
</div>

# Plots {.tabset .tabset-pills #first-tab-sec}

## mpg vs hp  
```{r, echo = FALSE}
plot(mtcars$mpg, mtcars$hp)
```  

## mpg vs wt  
```{r, echo = FALSE}
plot(mtcars$mpg, mtcars$wt)
```  

# Next Section

We created a div element with the id myDiv. Inside that element we store the content, thats supposed to go underneath the tabbed area.

The jQuery (JS) snippet does the following:

As soon as the document finished loading ($(document).ready()), we execute the anonymous function(){...}. Inside that function we grab our div element by its id and append it to the element with the id first-tab-sec.

Multiple Tabbed Sections

If we have another tabbed-section, we just give it a new id, for example second-tab-sec, and add the code

$('#mySecDiv').appendTo('#second-tab-sec');

to the JS chunk. Here we assume that the content is contained within a div with the id mySecDiv.

This looks great! I tried it out and it does what I want. Quick question though.. what happens if you have a second tabbed section with different content? I tried adding another jQuery snippet, but it copies the text under every tabbed section. — AlexP, May 03 '17 at 13:31
Edited my answer. We can identify our tabbed section by giving it a unique id. — Martin Schmelzer, May 03 '17 at 14:41

Rmarkdown: Placing static content under a tabbed section

1 Answers1

Reproducible Example:

Multiple Tabbed Sections