Collapsing / hiding figures in R markdown

问题:

In my rmarkdown document, I am able to show and hide code with the following - which creates a convenient button on the righthand side of the document before each block of code:

output: 
  html_document:
    code_folding: hide

Is there a similarly convenient method to hide tables or figures? If so, please provide a reference as I have not been able to find any. Otherwise a workaround would be appreciated, thank you!

回答1:

If you add this to the end of your .Rmd file

<script>
$( "input.hideshow" ).each( function ( index, button ) {
  button.value = 'Hide Output';
  $( button ).click( function () {
    var target = this.nextSibling ? this : this.parentNode;
    target = target.nextSibling.nextSibling.nextSibling.nextSibling;
    if ( target.style.display == 'block' || target.style.display == '' ) {
      target.style.display = 'none';
      this.value = 'Show Output';
    } else {
      target.style.display = 'block';
      this.value = 'Hide Output';
    }
  } );
} );
</script>

and then this before each chunk you want to have a toggle:

<input type=button class=hideshow></input>

(adapted from here: https://groups.google.com/forum/#!topic/knitr/d37E0mP3w6k)

Note: this will work if you show the code - if you are hiding the code (with echo = FALSE), change

target = target.nextSibling.nextSibling.nextSibling.nextSibling;

to

target = target.nextSibling.nextSibling;

Note 2: if you want to use the code_folding option, change

 target = target.nextSibling.nextSibling.nextSibling.nextSibling;

to

 target = target.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;

回答2:

I have not been able to get the above solution (or others I found) to work consistently, but using the in-line html (Bootstrap example/solution) I found at W3schools.com works well in Rmarkdown.

I use it to show a simple plot in html output in the example below. It should work with any chunk output:

<button class="btn btn-primary" data-toggle="collapse" data-target="#BlockName"> Show/Hide </button>  
<div id="BlockName" class="collapse">  

```{r}
plot(mtcars$disp, mtcars$mpg)
```

</div>

回答3:

I was able to get Lucy's code working for me, but I also think it's more useful and cleaner to have the outputs hidden by default. It's a very simple addition. Just execute jquery that clicks all the "Hide Output" buttons upon rendering. My code looks like this:

<script>
$( "input.hideshow" ).each( function ( index, button ) {
  button.value = 'Hide Output';
  $( button ).click( function () {
    var target = this.nextSibling ? this : this.parentNode;
    target = target.nextSibling.nextSibling;
    if ( target.style.display == 'block' || target.style.display == '' ) {
      target.style.display = 'none';
      this.value = 'Show Output';
    } else {
      target.style.display = 'block';
      this.value = 'Hide Output';
    }
  } );
} );

$("input.hideshow").click()
</script>

Only the last line before </script> was the addition.