Selectively hide text with JavaScript in RMarkdown

I guess this is one of those where I kind of did know it was possible, really. If I’d thought it through. But I’ve always not been sure how easy it would be and I’ve been in too much of a rush.

So I’m trying to move my organisation onto HTML instead of Word. HTML is easier to output and parse, and it’s interactive with a bit of JavaScript. I used the DT package in R to put some tables into an RMarkdown document and of course that’s very nice because they’re pageable, orderable, and searchable out of the box.

But there’s often a lot of text that I’m not sure everyone will be interested in. We collect a lot of comments and some people want every single one. Some people just want the tables. So it would be nice to be able to selectively show and hide the text in each section.

And I did know this, really. But RMarkdown documents accept pure HTML. And pure JavaScript. So it’s embarrassingly easy. Ridiculously easy. Here’s one. I half stole it from w3chools.com


---
title: "JavaScript test"
author: "Chris Beeley"
date: "11 May 2018"
output: html_document
---

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

<button onclick="myFunction()">Show/ hide</button>

<div id="myDIV">

Some comments here.

There are lots so it's nice.

To be able to hide them.

</div>

That’s it. Boom. Done. If you’re not all doing that by the middle of next week then you need to be asking yourselves why.

1 thought on “Selectively hide text with JavaScript in RMarkdown

  1. Thank you – really helpful for us R users who can’t instantly workout how to translate the javascript solutions into something that works with R.

    One change I wanted to make was for the default state to be hidden rather than displayed. For anyone reading in the future, its a simple change: “

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.