Skip to content

Instantly share code, notes, and snippets.

@emitanaka
Created July 20, 2019 04:43
Show Gist options
  • Save emitanaka/eaa258bb8471c041797ff377704c8505 to your computer and use it in GitHub Desktop.
Save emitanaka/eaa258bb8471c041797ff377704c8505 to your computer and use it in GitHub Desktop.
Collapsible Code Output for `xaringan`
<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>
---
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)
```
]
@seasmith
Copy link

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

@emitanaka
Copy link
Author

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

@emitanaka
Copy link
Author

See alternative and more concise JS by @yihui here

@ashirwad
Copy link

ashirwad commented Dec 2, 2020

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

@emitanaka
Copy link
Author

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

@AGSCL
Copy link

AGSCL commented Aug 23, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment