RMarkdown reveal.js presentation code folding

Question

I'm preparing a RMarkdown reveal.js presentation. I want the R Code sections in the slide to be foldable in nature.

My yaml header looks like this, but the code folding is not visible in the final presentation.

---
title: "Untitled"
output: 
  revealjs::revealjs_presentation:
    code_folding: hide

---


## R Markdown

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.


## Slide with R Code and Output

```{r}
summary(cars)
```

## Slide with Plot

```{r, echo=FALSE}
plot(cars)
```

Adding code_folding: hide works for regular RMarkdown file.

Is code_folding not available for presentation? Is there any alternative way that I should try?

I would assume it is not. But you can still create smth similar with a bit of JavaScript. Maybe this helps: https://stackoverflow.com/a/37839683/1777111 — Martin Schmelzer, Aug 24 '17 at 11:38
Thank you Martin, I did try that code, but it seems to work only on HTML files, not on slides. — Vasim, Aug 24 '17 at 11:44
Thats true. The reason is the the DOM (document object model) of the presentations differs to that of a common RMarkdown HTML document. You would have to adapt the code a bit to make it work. — Martin Schmelzer, Aug 24 '17 at 11:52

Martin Schmelzer · Accepted Answer · 2017-08-24T19:01:57.553

I fiddled something. Guess this works only for source code chunks but could be extended to other elements. Most of the code is just taken from my answer mentioned in my comment above.

Full MRE:

---
title: "Untitled"
output: 
  revealjs::revealjs_presentation:
    self_contained: true
---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $chunks = $('div.sourceCode'); // get all divs containing source code...
  // add the button and a wrapping container to each of them...
  $chunks.each(function() {
    $(this).prepend('<div class=\"but_con\"><div class=\"showopt\">Show Source</div></div>');  // add the button and a wrapping container to each of them...
    $(this).find('code').toggle(); // hide them right away...
  });  

  // definition of the function to toggle visibility
  // we select all buttons, and add a click function
  $('.showopt').click(function() {
    var label = $(this).html();
    if (label.indexOf("Show") >= 0) {
      $(this).html(label.replace("Show", "Hide"));
    } else {
      $(this).html(label.replace("Hide", "Show"));
    }
    $(this).parent().siblings('pre').children('code').slideToggle('fast', 'swing');
  });

});
</script>


<style>
div.but_con {
  margin: auto;
  width: 90%;
  padding-bottom: 10px;
}

div.showopt {
  font-size: 35%;
  background-color: #004c93;
  color: #FFFFFF; 
  width: 100px;
  height: 20px;
  text-align: center;
  vertical-align: middle !important;
  float: right;
  font-family: sans-serif;
  border-radius: 8px;
  margin-bottom: 10px;
}

.showopt:hover {
    background-color: #dfe4f2;
    color: #004c93;
}
</style>

## R Markdown

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.


## Slide with R Code and Output

```{r}
summary(cars)
```

## Slide with Plot

```{r, echo=FALSE}
plot(cars)
```

Thank you; it works perfectly. I will try to understand the difference between both and learn the reason. — Vasim, Aug 24 '17 at 13:40

RMarkdown reveal.js presentation code folding

1 Answers1