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?

Answer 1

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