RMarkdown: How to end tabbed content

Question

Once I have defined tabs, how do I define content outside/below tabs? Or, how do I end tabbed content?

I have planned a layout like so:

title
content above tabbed region.

tab1 tab2
-------------------
tab content 1
-------------------
content below tabbed region

which in rmarkdown would be

## title {.tabset .tabset-fade}
content above tabbed region.

### tab 1 
tab content 1
### tab 2
tab content 2

content below tabbed region.

But, content below tabbed region. appears as part of tab2. How can it be defined outside of the tab?

Perhaps I might have further headings in content below. So a related question would be how can I define which headings to be part of tab and which ones not to be?

Also RTFM'ed and didn't find any information about defining tabset boundaries. Manual page: http://rmarkdown.rstudio.com/html_document_format.html — Bill Huang, Jul 01 '16 at 10:51

J_F · Accepted Answer · 2020-05-05T20:09:49.160

79

My approach to this problem is simple, but it works:

## title {.tabset .tabset-fade}
content above tabbed region.

### tab 1 

tab content 1

### tab 2

tab content 2

##

content below tabbed region

The tab works only for 'sub-headers of the header with the.tabset attribute to appear within tabs rather than as standalone section' (see here)

So you just have to define a new header (in this case no title) one level above the tabs to signalize RMD not to be in a tabbed section.

It is also possible to design a document with different tabs in different headers:

## section 1 {.tabset .tabset-fade}
content above tabbed region.

### tab 1 

tab content 1

### tab 2

tab content 2

## section 2 {.tabset .tabset-fade}

### tab 1 

tab content 1

### tab 2

tab content 2

### tab 3

tab content 3

#
content below tabbed region

Edit: If you want to use a Table of Content (TOC) there is a problem with the solution above, because the last # will create an empty entry in the TOC. The solution here is to use

## {.unlisted .unnumbered}

content below tabbed region

edited May 05 '20 at 20:09

answered Jul 01 '16 at 12:59

J_F

9,956
2
31
55

Can this syntax be embedded under section titles / subtitles (e.g. a tabset at section 2 and another one at section 3) ? (p.s. I am new to R markdown but need an immediate solution at work.) – Bill Huang Jul 03 '16 at 06:47
yes, this works, see [here](http://www.directupload.net/file/d/4405/68otcmt6_jpg.htm) – J_F Jul 03 '16 at 08:52
5

When automatic section numbering is in use, then `##` creates a level 2 heading with numbers. It can be hidden from the TOC using `## {.toc-ignore}`, but it is still visible in the document. @conrad-mac's solution using `` worked better for this particular situation. – mindlessgreen Apr 18 '19 at 21:22

score 15 · Answer 2 · edited Sep 04 '19 at 06:55

15

Use {-} for removing the TOC numbers, after ending the tabbed content

tab content 2
## section 2 {.tabset .tabset-fade}
### tab 1 
tab content 1
### tab 2
tab content 2
### tab 3
tab content 3
## {-}
content below tabbed region

edited Sep 04 '19 at 06:55

barbsan

3,418
11
21
28

answered Sep 03 '19 at 23:19

Dinesh

163
2
10

conrad-mac · Answer 3 · 2018-08-23T20:59:57.810

12

An alternative is to use a closing div tag (i.e.</div>). See the following:

---
title: "Test"
output: html_document
---

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

## Title {.tabset .tabset-fade}
Content above tabbed region.

### Tab 1 
Tab 1 content

### Tab 2
Tab 2 content

</div>

Content below tabbed region

edited Aug 23 '18 at 20:59

answered Aug 23 '18 at 04:46

conrad-mac

843
10
15

1

This works good if table of content (toc: false) is deactivated. Otherwise the content after `` will not be included – Florian Oct 01 '19 at 09:09

score 0 · Answer 4 · answered Jan 29 '21 at 07:52

If you want to include content related to a parent tab and leave a children tabset, for example

[Parent tab 1] __Parent tab 2__
[Child tab 1] __Child tab 2__
<Child tab 1 content>
---
<Parent tab 1 other content>

where <Parent tab 1 other content> is shown regardless of selected [Child tab], try this Rmd, which is a little bit hacked by JavaScript:

---
title: "Nested tabs example"
---

```{js}
document.addEventListener("DOMContentLoaded", function() {
  $(".leave-tabset").removeClass("tab-pane tabbed-pane");
}, false);
```

# Nested tabs example {.tabset}

## Parent 1 {.tabset}

### Parent 1, Child 1

Parent 1, Child 1 content

### Parent 1, Child 2

Parent 1, Child 2 content

### {- .leave-tabset}

---

#### Parent 1, Other content 1

Foo 1

#### Parent 1, Other content 2

Bar 1

<!-- next main tab -->

## Parent 2 {.tabset}

### Parent 2, Child 1

Parent 2, Child 1 content

### Parent 2, Child 2

Parent 2, Child 2 content

### {- .leave-tabset}

---

#### Parent 2, Other content 1

Foo 2

#### Parent 2, Other content 2

Bar 2

<!-- next main tab -->

## Parent 3 {.tabset}

### Parent 3, Child 1

Parent 3, Child 1 content

### Parent 3, Child 2

Parent 3, Child 2 content

### {- .leave-tabset}

---

#### Parent 3, Other tabs {.tabset}

##### Parent 3, Other tab 1

Foo 3

##### Parent 3, Other tab 2

Bar 3

As you can see in Parent 3 tab, you can even define new tabsets after you leave the parent's child ones. But you will probably be short of header levels soon :)

score 0 · Answer 5 · answered Oct 19 '21 at 08:11

0

Check manual rmarkdown cookbook:

## Results {.tabset}

### Tab One

### Tab Two

## {-}

With the above unnumbered ({-}) and empty section header, we can end the tabset and continue to write more paragraphs.

answered Oct 19 '21 at 08:11

Francois Collin

1
1

RMarkdown: How to end tabbed content

5 Answers5

Linked