RMarkdown 可折叠面板

Question

在为学生准备教程时，我需要一种方法来隐藏可折叠面板中的内容，单击按钮即可显示这些内容。我已经使用下面的代码让它工作了。 RMarkdown 文件如下所示：

---
title: Collapsible Panel
output:
  html_document:
    theme: flatly
    highlight: tango
---

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
    Click For Answer
  </a>
</p>
<div class="collapse" id="collapseExample1">
  <div class="card card-body">

  ```{r}
  hist(1:10)
  ```

  </div>
</div>

渲染后是这样的：

这行得通！我还可以通过控制块选项来控制是否必须显示 代码 和/或 结果。

但是，这并不是最优的，因为所有原始 html 的代码都是混乱和丑陋的。多次复制粘贴并不理想。每次使用此代码块时，使用的 ID collapseExample1 都必须是唯一的。

有没有办法把这个块打包成一个可重用的单元，比如一个函数之类的？我正在考虑类似于 R 函数的东西，我可以在其中传递要评估的代码（或不需要评估的代码）、块选项（eval、echo、results 等）和面板的状态（打开/关闭）。

collapsible_panel(code=NULL,echo=TRUE,results="show",state="closed")

在这一点上，我有很多不清楚的问题。我可以在 R 块中运行 R 块吗？也许我需要使用子 Rmd 文件？我需要编写一些自定义 javascript 吗？

Answer 1

另一个可行的简单解决方案（但没有按钮和样式）。

```{r, eval=FALSE}
hist(1:10)
```

<details>
  <summary>Click for Answer</summary>
    ```{r, echo=FALSE, eval=TRUE}
    hist(1:10)
    ```
</details> 

这里有两种状态：

已折叠

扩展

Answer 2

您可以使用multiple tabs（在标题后添加{.tabset}）。使用r-markdown 生成它们非常简单，它们看起来几乎与可折叠面板相同（当然您需要有多个选项）。
不要多次粘贴相同的代码，请在块选项 (code = readLines("code.R")) 中指定 code 参数。或者您可以只有一个面板用于代码和答案，这样您就不需要外部文档。

---
title: Collapsible Panel
output:
  html_document:
    theme: flatly
    highlight: tango
---

# Question 1 {.tabset .tabset-fade .tabset-pills}

## Question

How does uniform distribution look like?

## Code 

```{r, echo = TRUE, eval = FALSE, code = readLines("Q1.R")}
```

## Answer

```{r, echo = FALSE, eval = TRUE, code = readLines("Q1.R")}
```

代码文件（Q1.R）：

hist(1:10)

---

如果没有任何内容然后显示答案，您可以使第一个选项卡完全为空：

# Question 1 {.tabset}

##  <span>&#8203;</span>

## Answer

```{r, echo = FALSE, eval = TRUE, code = readLines("Q1.R")}
```

Answer 3

显示了两种略有不同的方法。这两种方法都只使用 HTML 和 CSS。这是完整的工作 Rmd。

---
title: Accordion
output:
  html_document
---

## Method 1

This method uses button.

```{css,echo=FALSE}
button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}
```

```{r,echo=FALSE,results='hide'}
knitr::knit_hooks$set(drop1=function(before, options, envir) {
    if (before) {
        paste(
            '<p>',
'<button class="btn btn-primary collapsed" data-toggle="collapse" data-target="#ce1">',
'</button>',
'</p>',
'<div class="collapse" id="ce1">',
'<div class="card card-body">',  sep = "\n")
    } else {
        paste("</div>", "</div>", sep = "\n")
    }
})
```



```{r,drop1=TRUE,results="markup"}
str(iris)
```

## Method 2

This method uses a link which behaves like a button.

```{css,echo=FALSE}
[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}
```

```{r,echo=FALSE,results='hide'}
knitr::knit_hooks$set(drop2=function(before, options, envir) {
    if (before) {
        paste(
            '<p>',
'<a class="btn btn-primary collapsed" data-toggle="collapse" href="#ce2">',
'<span class="if-collapsed">+</span>',
'<span class="if-not-collapsed">-</span>',
'</a>',
'</p>',
'<div class="collapse" id="ce2">',
'<div class="card card-body">',  sep = "\n")
    } else {
        paste("</div>", "</div>", sep = "\n")
    }
})
```

```{r,drop2=TRUE,results="markup"}
str(iris)
```

已执行的 R 块可以隐藏在可折叠容器中（默认为折叠）。容器是使用自定义 knitr 钩子 (drop1/drop2) 在 R 块选项中定义的。容器的可折叠状态是使用按钮或链接（看起来像按钮）控制的。自定义 CSS 用于将按钮上的文本更改为折叠/打开状态。