CODEWITHSUNDEEP
r-markdownknitr
rob99985
rob99985

Reputation: 157

Rmarkdown is not displaying collapsible panels correctly

i'm trying to create an FAQ document with expandable sections. For example, in the attached example, I would like sections/questions 1.1 to 1.4 to lie underneath topic 1, and then topic 2 to be a new area with new questions/sections. As can be seen in the attached figure, the code works perfectly for the first two sections but then appears to fail thereafter. I have tried multiple different variants on <br> and </details> but nothing seems to address it. Similarly, it looks as though the table of contents isn't working appropriately as only TOPIC 1 appears in the floating toc. Bizarrely, the number_sections: true seems to number sections appropriately and so it seems to be detecting all headers etc... So, I was hoping somebody can help figure out this mystery that i anticipate is very straightforward!

Here's how it looks currently

---
title: "FAQ"
date: "10/04/2020"
output: 
  html_document:
    toc: true
    toc_depth: 2
    toc_float: true
    number_sections: true
    theme: flatly
    highlight: tango
    code_folding: hide
---

```{r setup, include=FALSE}
    library(knitr)

    ## TOPIC 1

    ### QUESTION 1. {.tabset .tabset-fade .tabset-pills}
    <details>
     <summary> Click Here! </summary>

    #### TLDR
    summary

    #### Learn More
    description

    <br>

    </details>

    ### QUESTION 2. {.tabset .tabset-fade .tabset-pills}
    <details>
     <summary> Click Here! </summary>

    #### TLDR
    summary

    #### Learn More
    description

    <br>

    </details>

    ### QUESTION 3. {.tabset .tabset-fade .tabset-pills}
    <details>
     <summary> Click Here! </summary>

    #### TLDR
    summary

    #### Learn More
    description

    <br>

    </details>

    ### QUESTION 4. {.tabset .tabset-fade .tabset-pills}
    <details>
     <summary> Click Here! </summary>

    #### TLDR
    summary

    #### Learn More
    description

    <br>

    </details>

    ## TOPIC 2. 

    ### QUESTION 5. {.tabset .tabset-fade .tabset-pills}
    <details>
     <summary> Click Here! </summary>

    #### TLDR
    summary

    #### Learn More
    description

    <br>

    </details>

Upvotes: 1

Views: 409

Answers (2)

Radovan Miletić
Radovan Miletić

Reputation: 2821

Once you remove all </details> closing tags, problem would be solved.
It seems to be Markdown issue failing to render <details><summary>...</summary></details>.

enter image description here

Upvotes: 2

Daniel_j_iii
Daniel_j_iii

Reputation: 3242

---
title: "FAQ"
date: "10/04/2020"
output: 
  html_document:
    toc: true
    toc_depth: 2
    toc_float: true
    number_sections: true
    theme: flatly
    highlight: tango
    code_folding: hide
---


```{r setup, include=FALSE}
    library(knitr)
```

:::: {style="display: flex;"}

::: {}
Here is the **first** Div.


## TOPIC 1

### QUESTION 1. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>

#### TLDR
summary

#### Learn More
description

<br>

</details>

### QUESTION 2. {.tabset .tabset-fade .tabset-pills}
<details>
 <summary> Click Here! </summary>

#### TLDR
summary

#### Learn More
description

<br>

</details>

### QUESTION 3. {.tabset .tabset-fade .tabset-pills}
<details>
 <summary> Click Here! </summary>

#### TLDR
summary

#### Learn More
description

<br>

</details>

### QUESTION 4. {.tabset .tabset-fade .tabset-pills}
<details>
 <summary> Click Here! </summary>

#### TLDR
summary

#### Learn More
description

<br>

</details>

:::

::: {}
And this block will be put on the right:

## TOPIC 2. 

### QUESTION 5. {.tabset .tabset-fade .tabset-pills}
<details>
 <summary> Click Here! </summary>

#### TLDR
summary

#### Learn More
description

<br>

</details>
:::

::::

Hope this gets you closer to your goal. Use This link to look more into possibly using multiple columns in your Rmarkdown. The drop down options don't work, but try messing with this and see if it gets you any closer. Let me know. Love to help and learn at the same time

Upvotes: 0

Related Questions