Solución:
Otra solución simple que funcionaría (pero sin botones y estilo).
```{r, eval=FALSE}
hist(1:10)
```
<details>
<summary>Click for Answer</summary>
```{r, echo=FALSE, eval=TRUE}
hist(1:10)
```
</details>
Y aquí están los dos estados:
Colapsado
Expandido
Puede usar varias pestañas (agregar {.tabset} después del encabezado). Es muy simple generarlos usando r-markdown y tienen casi el mismo aspecto que el panel plegable (por supuesto, debe tener más de una opción).
No pegar el mismo código varias veces, especifique code argumento en opciones de fragmentos (code = readLines("code.R")). O puede tener solo un panel para el código y la respuesta para que no necesite un documento externo.
---
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")}
```
Archivo de código (Q1.R):
hist(1:10)
Para no tener ningún contenido y luego mostrar la respuesta, puede hacer que la primera pestaña esté completamente vacía con:
# Question 1 {.tabset}
## <span>​</span>
## Answer
```{r, echo = FALSE, eval = TRUE, code = readLines("Q1.R")}
```
Se muestran dos métodos ligeramente diferentes. Ambos enfoques utilizan solo HTML y CSS. Aquí está el Rmd de trabajo completo.
---
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="https://foroayuda.es/#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)
```
Los fragmentos de R ejecutados se pueden ocultar en contenedores plegables (contraídos de forma predeterminada). Los contenedores se definen en las opciones de fragmentos R utilizando un gancho de tejido personalizado (drop1/drop2). Los estados plegables del contenedor se controlan mediante un botón o un enlace (parece un botón). CSS personalizado se utiliza para cambiar el texto en el botón para estados contraídos / abiertos.