How to add code folding to paged_table and kable outputs in distill article in R

Question

Thanks to Martin Schmelzer we have a wonderful solution to hide/show outputs from code chunks in R markdown HTML documents. It also works well with distill articles made from the distill package in R. I was hoping if it could be extended to hide/show paged_table (from Rmarkdown package) and kable (from knitr package) outputs as well. I know that something has to be added to the javascript to include classes related to paged_table and kable outputs but I don't know to write javascript codes. Is it possible to do so in the first place? Thanks.

---
title: "Untitled"
description: |
  A new article created using the Distill format.
author:
  - name: Nora Jones 
    url: https://example.com/norajones
    affiliation: Spacely Sprockets
    affiliation_url: https://example.com/spacelysprokets
date: "`r Sys.Date()`"
output: distill::distill_article
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

#paged_table output which I want to hide/show like code folding
```{r}
rmarkdown::paged_table(iris)
```

#kable output which I want to hide/show like code folding
```{r}
knitr::kable(iris)
```

Inspired by the answer from @TarJae I am updating this question to give more clarity to what I want. I straight up copied the code to enable the hide/show button for div class elements from here. Given below is the javascript code for the button.

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}  

Saving this js script file as "output_folding.js" and calling it in the distill article by the following code.

<script src="output_folding.js"></script>

Enabling the hide/show button in the code chunks which has either paged_table output or kable output. The below code is shown for when it is a paged_table output.

<button onclick="myFunction()">Click Me</button>

<div id="myDIV">
```{r}
rmarkdown::paged_table(iris)
```
</div>   

This is the final result.

Before clicking the button

After clicking the button

Now this works, but I wish I could improve upon this. Shown below is the hide/show button from the code posted in this solution.

Before clicking the button

After clicking the button

This works flawlessly with normal code outputs but does not work with paged_table and kabel outputs. Some of the features I would want from this is code is;

1. By default the paged_table or kable outputs should be hidden.
2. Upon clicking the button the text should change from 'hide output' to 'show output'
3. A CSS file to modify the colour and font of the code button and the text inside it.
4. Able to place the button on the right side so that it does not obstruct the view.

In short, I want to have the same button function as mentioned here for paged_table and kable outputs in distil article. Thank you very much for reading this.

Answer 1

Do you mean something like this?

title: "Untitled"
description: |
  A new article created using the Distill format.
author:
   - name: Nora Jones 
    url: https://example.com/norajones
    affiliation: Spacely Sprockets
    affiliation_url: https://example.com/spacelysprokets
date: "`r Sys.Date()`"
output: distill::distill_article
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

#paged_table output which I want to hide/show like code folding
```{r}
rmarkdown::paged_table(iris)
```

#kable output which I want to hide/show like code folding
<button class="btn btn-primary" data-toggle="collapse" data-target="#BlockName">     Show/Hide </button>  
<div id="BlockName" class="collapse">  
```{r}
knitr::kable(iris)
```
</div>