0

The very first answer of this wonderful post shows a straight forward javascript that will to insert a toggle to hide all code in a bookdown doc.

Although I have tried many different variations and tried to understand this post discussing options to set a default parameter value for a JavaScript function, I cannot seem to figure out how to set the default of the resulting bookdown doc in the first referenced post to hide all code as a default and have the toggle show the reader the code when they want to see it. Any help would be much appreciated.

NewGraph
  • 1
  • 2
  • 1
    You don't need to understand anything about default parameters since no function is called with arguments in that script. All you need is to append a line `document.addEventListener('DOMContentLoaded', toggle_R);` in the bottom of the script which will hide everything once the elements have loaded. – Bergi Dec 05 '21 at 21:09

1 Answers1

0

Thank you for the answer above Bergi. Nice one! I will add the entire script modified as per the section. It of course is saved as the header.htm file pointed to in the index.Rmd yaml as described by another leader named Sébastien Rochette in his post linked in the question.

It seems that the toggle switch needed to be named as universal (i.e Show/Hide Code) since the state of each "chapter" of the bookdown doc did not always jive with what the toggle button was displaying when it was hit when reviewing other "chapters"...

<script type="text/javascript">

// toggle visibility of R source blocks in R Markdown output
function toggle_R() {
  var x = document.getElementsByClassName('r');
  if (x.length == 0) return;
  function toggle_vis(o) {
    var d = o.style.display;
    o.style.display = (d == 'block' || d == '') ? 'none':'block';
  }

  for (i = 0; i < x.length; i++) {
    var y = x[i];
    if (y.tagName.toLowerCase() === 'pre') toggle_vis(y);
  }

    var elem = document.getElementById("myButton1");
    if (elem.value === "Show/Hide Code") elem.value = "Show/Hide Code";
    else elem.value = "Show/Hide Code";
}

document.write('<input onclick="toggle_R();" type="button" value="Show/Hide Code" id="myButton1" style="position: absolute; top: 10%; right: 2%; z-index: 200"></input>')

document.addEventListener('DOMContentLoaded', toggle_R);

</script>
NewGraph
  • 1
  • 2