CODEWITHSUNDEEP
rmarkdownr-markdown
Ravi Krishna
Ravi Krishna

Reputation: 158

RMarkdown can't seem to produce Tabs in Tabs

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

Upvotes: 2

Views: 5144

Answers (2)

RLesur
RLesur

Reputation: 5910

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

Upvotes: 5

Daniel Levy
Daniel Levy

Reputation: 1

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

Upvotes: 0

Related Questions