CODEWITHSUNDEEP
rr-markdown
mindlessgreen
mindlessgreen

Reputation: 12142

RMarkdown: How to end tabbed content

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?

Upvotes: 48

Views: 41532

Answers (5)

Francois Collin
Francois Collin

Reputation: 11

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.

Upvotes: 1

jirinovo
jirinovo

Reputation: 2275

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

enter image description here

enter image description here

enter image description here

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 :)

Upvotes: 0

J_F
J_F

Reputation: 10372

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.

enter image description here

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

enter image description here

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

Upvotes: 82

Dinesh
Dinesh

Reputation: 163

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

Upvotes: 15

conrad-mac
conrad-mac

Reputation: 893

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

Upvotes: 13

Related Questions