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!
---
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>

