Rmarkdown: Placing static content under a tabbed section - html

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.

Answer 1

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.