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，{{1} }等）和面板状态（打开/关闭）。

results

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

Answer 1

您可以使用multiple tabs（在标题后面添加{.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")}
```

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块可以隐藏在可折叠的容器中（默认情况下是折叠的）。使用自定义编织钩子（drop1 / drop2）在R块选项中定义容器。容器的可折叠状态使用按钮或链接（看起来像按钮）来控制。自定义CSS用于更改按钮在折叠/打开状态下的文本。

Answer 3

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

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

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

这是两种状态：

崩溃

展开

RMarkdown可折叠面板

3 个答案: