Collapsible Code Output for `xaringan`

collapseoutput.js

<script>
(function() {
  var divHTML = document.querySelectorAll(".details-open");
  divHTML.forEach(function (el) {
    var preNodes = el.getElementsByTagName("pre");
    var outputNode = preNodes[1];
    outputNode.outerHTML = "<details open class='output'><summary>Output</summary>" + outputNode.outerHTML + "</details>";
  })
})();
(function() {
  var divHTML = document.querySelectorAll(".details");
  divHTML.forEach(function (el) {
    var preNodes = el.getElementsByTagName("pre");
    var outputNode = preNodes[1];
    outputNode.outerHTML = "<details class='output'><summary>Output</summary>" + outputNode.outerHTML + "</details>";
  })
})();
</script>

slide.Rmd

---
output:
  xaringan::moon_reader:
    includes:
      after_body: "collapseoutput.js"
---

### This output is closed first
.details[
```{r}
summary(cars)
```
]

### This output is open first
.details-open[
```{r}
str(cars)
```
]

Note you need to break up the chunk so there is only one output per .details (or .details-open).
E.g.

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

would hide only for the first code output (i.e. output for summary(cars)) but not for output of str(cars).

I used to write pure html in .rmd like:

<details>
    <summary>
    Click to expand
    </summary>
    ```{r}
    summary(cars)
    ```
</details>

So just was curious about the advantage of wrapping this in JS functions? is it for better reusability and compact code?

@OmaymaS It actually doesn't work for xaringan, I think because remark.js processes the R markdown output in a different way within html code as opposed to markdown code. Also by doing that it would fold the code itself too while this folds only the output alone.

Thanks for the clarification :)

Can the details/details-open class be specified with chunk option class.source?

@seasmith not for xaringan because it's processed by remark.js instead of Pandoc (from what I understand)

See alternative and more concise JS by @yihui here

Hey @emitanaka, what tweaks in your code are needed to collapse source code instead of output?

You'll need to change preNodes[1] to preNodes[0] in js @ashirwad

When I include this code, I have problems with special characters (e.g., &#39 %>% )