R Markdown: hide spoiler text (hover over text element)

Question

Is it possible to hide blocks of text within .html files created with R Markdown? The elements of text should be hidden until the user hovers over the text preferentially (or clicks a button). The elements to be hidden do not concern code blocks. Currently I include text within < p> < /p>

It was suggested to hide text blocks by preceding each line with '>!', but R Studio does not recognize this 'markdown' approach. It just returns a text block that starts with '!'. I prefer this simple 'hover' approach though, above Javascript and buttons.

Any suggestions would be welcome. Thanks.

Answer 1

My suggestion is to use CSS for this task.

The following Rmd file includes some rules to hide the spoiler class elements. You may find other approaches with CSS:

---
output: html_document
---

```{css, echo=FALSE}
.spoiler {
  visibility: hidden;
}

.spoiler::before {
  visibility: visible;
  content: "Spoiler alert! Hover me to see the answer."
}

.spoiler:hover {
  visibility: visible;
}

.spoiler:hover::before {
  display: none;
}
```

You can insert a message in raw `HTML`:
<p class="spoiler">Answer</p>

A better approach is to use bracketed spans:  
[This is another answer]{.spoiler}

Answer 2

Based on the additional part about wanting to reveal a kable'd table, I took a look at some functions from the htmltools package for creating HTML elements. The way I came up with uses just the smallest amount of Javascript, via a js code block.

Basically, I create a button using shiny::actionButton and attach to it a Javascript click handler by supplying a function name to the onclick attribute. The knit table is inside a HTML wrapper so that it will render properly, inside a <div> element as a container. This container has a hidden property initially set to true.

The click handler is the only real Javascript to write, and that's a function that finds the <div> by ID, and sets its hidden property to false.

The RMarkdown:

---
output: html_document
---

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

```{r}
library(htmltools)

shiny::actionButton("show_table_button", 
                    label = "Show table", 
                    onclick = "button_handler()")

div(id = "tableContainer", 
    hidden = "true",
    HTML(knitr::kable(head(iris), format = "html")))
```

```{js}
function button_handler() {
  document.getElementById('tableContainer').hidden = false;
}
```

That creates:

After clicking the button:

Note that there are some other packages for writing more complex Javascript code in R—haven't used any to recommend one—but I tried to keep the packages limited to what you would already have from using anything Shiny / HTML Widgets related.