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

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