Ndtyjky

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.

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}

This is of course possible. There are several possibilities including linear transformations (animated fading), buttons, no buttons and so on.

To start with, here is a simple approach using CSS. When not hovered, the font and background colors match and therefore no text is visible. When hovered the background turns white and the text turns black.

---

title: "Hide Code Blocks"

author: "Martin Schmelzer"

date: "June 25, 2018"

output: html_document

---



<style>

hide {

  background-color: #d6d6d6;

  color: #d6d6d6;

}

hide:hover {

  background-color: white;

  color: black;

}

</style>



## R Markdown



<hide>This is a hidden text block!</hide>

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.