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的代码都很凌乱且难看。多次复制粘贴并不理想。collapseExample1每次使用此代码块时，使用的ID 必须唯一。

有什么方法可以将此块打包成可重用的单元，例如函数或其他东西？我想这样的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

显示了两种稍微不同的方法。这两种方法都只使用 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 用于更改按钮上折叠/打开状态的文本。

Answer 3

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

---
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")}
```