Collapsible Code Output with <details>

[yihui]

By @emitanaka: https://twitter.com/statsgen/status/1152440358124437505
https://gist.github.com/emitanaka/eaa258bb8471c041797ff377704c8505

I'd like to use one function instead of two since the two look so similar to each other:

collapse-output.html

<script>
(function() {
  var divHTML = document.querySelectorAll(".details");
  divHTML.forEach(function (el) {
    var preNodes = el.getElementsByTagName("pre");
    if (preNodes.length < 2) return;
    var outputNode = preNodes[1];
    outputNode.outerHTML = "<details " +
      (el.classList.contains("open") ? "open " : "") +
      "class='output'><summary>Output</summary>" +
      outputNode.outerHTML + "</details>";
  })
})();
</script>

test.Rmd

---
output:
  xaringan::moon_reader:
    includes:
      after_body: "collapse-output.html"
---

### This output is closed first

.details[
```{r}
summary(cars)
```
]

### This output is open first

.details.open[
```{r}
str(cars)
```
]

Possible improvements

One .details[] can contain multiple output blocks, e.g.,

.details.open[
```{r}
1:50
str(cars)
```
]

In this case, we don't only process preNodes[1] but all <pre> tags for outputs. To differentiate output <pre> from source <pre>, we have to look at its <code> child and check if its el.classList.length > 1 (source <pre>'s <code> child have multiple classes).

Another idea is to use knitr output hooks for an alternative syntax (add .details[] automatically in the output hook):

```{r, output.details = NULL (default) / TRUE (open) / FALSE (closed)}
1:50
str(cars)
```

https://yihui.name/knitr/hooks/

Perhaps this is not worth the effort since it doesn't save much typing effort.

I'm just writing down the ideas here because this might be an interesting topic for the xaringan book. Of course, we can also just support this feature in this package.

[emitanaka]

I love how concise you were able to make my JS.
I didn't realise that you can customise the output via output hooks. That will make things cleaner.
Adding the feature directly in the package is welcomed :) I think it may be useful for general Rmd and not just xaringan.
Speaking of the xaringan book, someone should get her writing going 😅

[jvcasillas]

Speaking of the xaringan book, someone should get her writing going 😅

That makes two of us. I have a long flight to Australia Friday so I’m going to get back on track. And to make this post somewhat relevant, I think the collapsible code output is a great feature. 👍🏽

[emitanaka]

@jvcasillas where in Australia are you coming? I'm in Sydney.