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)
```
]

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 %>% )