RMarkdown can't seem to produce Tabs in Tabs

Question

I am trying to make a static webpage using RMarkdown. I want to define a UI which has a first layer of tabs and then tabs underneath the first layer. I've already looked into a similar question at RMarkdown: Tabbed and Untabbed headings . But that answer doesn't help my cause. Please find below the tab structure that I want to acheive.

| Results
* Discussion of Results

           | Quarterly Results
           * This content pertains to Quarterly Results

                      | By Product
                      * Quarterly Performance by Products

                      | By Region
                      * Quarterly Performance by Region

* Final Words about Quarterly Results

           | Yearly Results
           * This content pertains to Yearly Results

                      | By Product
                      * Yearly Performance by Products

                      | By Region
                      * Yearly Performance by Region

* Final Words about Yearly Results

Here is the script in .Rmd format that I was using. But the output I was able to achieve look likes this Current Scenario. I'd want to have Final Words about Quarterly Results and Final Words about Yearly Results outside the Region tab and in Quarterly Results and Yearly Results respectively.

---
output:
  html_document:
    theme: paper
    highlight: tango
    number_sections: false
    toc: false
    toc_float: false
---
# Result Discussion {.tabset}
We will discuss results here

## Quarterly Results {.tabset}
This content pertains to Quarterly Results

### By Product

Quarterly perfomance by Products

### By Region

Quarterly perfomance by Region


Final Words about Quarterly Results

## Yearly Results {.tabset}
This content pertains to Yearly Results

### By Product

Yearly perfomance by Products

### By Region

Yearly perfomance by Region

Final Words about Yearly Results

RLesur · Accepted Answer · 2018-03-15T01:15:09.363

The problem comes from the fact that the last paragraphs (Final Words about Quarterly Results and Final Words about Yearly Results) belong to the last level 3 section and not to the parent level 2 section.
You have to manually control the sectioning of the rendered HTML to obtain what you want.

Using pandoc < 2.0, the only mean is to insert raw HTML:

---
output:
  html_document:
    theme: paper
    highlight: tango
    number_sections: false
    toc: false
    toc_float: false
---
# Result Discussion {.tabset}
We will discuss results here

## Quarterly Results {.tabset}
This content pertains to Quarterly Results

<div id="quarterly-product" class="section level3">
### By Product

Quarterly perfomance by Products
</div>

<div id="quarterly-region" class="section level3">
### By Region

Quarterly perfomance by Region
</div>

Final Words about Quarterly Results


## Yearly Results {.tabset}
This content pertains to Yearly Results

<div id="yearly-product" class="section level3">
### By Product

Yearly perfomance by Products
</div>

<div id="yearly-region" class="section level3">
### By Region

Yearly perfomance by Region
</div>

Final Words about Yearly Results

If you use pandoc 2.0 or greater, you can use fenced divs:

---
output:
  html_document:
    theme: paper
    highlight: tango
    number_sections: false
    toc: false
    toc_float: false
---
# Result Discussion {.tabset}
We will discuss results here

## Quarterly Results {.tabset}
This content pertains to Quarterly Results

::: {#quarterly-product .section .level3}
### By Product

Quarterly perfomance by Products
:::

::: {#quarterly-region .section .level3}
### By Region

Quarterly perfomance by Region
:::

Final Words about Quarterly Results


## Yearly Results {.tabset}
This content pertains to Yearly Results

::: {#yearly-product .section .level3}
### By Product

Yearly perfomance by Products
:::

::: {#yearly-region .section .level3}
### By Region

Yearly perfomance by Region
:::

Final Words about Yearly Results

Both the `HTML` and `Pandoc` solutions work. While applying your solution, I've come across a scenario where I need multiple `level 3` tabs under a single tab. Like this https://imgur.com/R6jKyPM. I've replicated your solution twice to get the desired result, but all my tabs ended up together like this https://imgur.com/J3WjrKX. Do you have any idea where I could've gone wrong? Attaching the link to the code [https://gist.github.com/Ravi1008/51b01909f945b6b52ad5d57515b1d0c8#file-current-rmd] — Ravi Krishna, Mar 15 '18 at 16:05
@RaviKrishna be careful, `HTML` elements `id`s must be unique. Correct this first, please. — RLesur, Mar 15 '18 at 16:25
Sorry, I missed it. Thanks for pointing out. Updated the Code on gist. — Ravi Krishna, Mar 15 '18 at 16:29

score 0 · Answer 2 · edited Mar 14 '18 at 15:39

0

You mean like this ? :

output:
  html_document:
    theme: paper
    highlight: tango
    number_sections: false
    toc: false
    toc_float: false
---
# Result Discussion {.tabset}
We will discuss results here

## Quarterly Results {.tabset}
This content pertains to Quarterly Results

### By Product

Quarterly perfomance by Products

### By Region

Quarterly perfomance by Region


##
Final Words about Quarterly Results

## Yearly Results {.tabset}
This content pertains to Yearly Results

### By Product

Yearly perfomance by Products

### By Region

Yearly perfomance by Region

##
Final Words about Yearly Results

edited Mar 14 '18 at 15:39

acylam

18,231
5
36
45

answered Mar 14 '18 at 15:36

Daniel Levy

1
2

Thank you for the answer. I've actually tried out this solution before posting on SO. But adding the "#" didn't solve the problem. I am ending up with separate un-named tabs with `Final Words about Quarterly Results` & `Final Words about Yearly Results`. – Ravi Krishna Mar 14 '18 at 17:04
Just so i'm clear: This is what you wanted : https://imgur.com/a/gIQQy But pasting my code did not produce this result ? – Daniel Levy Mar 14 '18 at 17:09
I want `Quarterly Results` and `Yearly Results` also to be tabsets appearing under Result Discussion, just like say how By Region & By Product appear. If I exactly reproduce your code using "##", I end up with this: https://imgur.com/a/J13AV If I replace "##" with "#", I get: https://imgur.com/a/iYpDB Neither is the exact solution that I'm looking for. – Ravi Krishna Mar 14 '18 at 17:24
Yeah, using the # just creates new headers. My understanding right now is that the flow is linear, so you can can't "link" back to a tab above the tab (without it having to be specific to the lower tab which would create redundancy in your code). – Daniel Levy Mar 14 '18 at 18:27

RMarkdown can't seem to produce Tabs in Tabs

2 Answers2

Linked