kableExtra disabling javascript in bookdown/rmarkdown documents?

bookdown

#1

Hello, I'm trying to use the following javascript to selectively hide some code chunks that don't really matter, but might be of interest to some readers. I originally found the script here: https://stackoverflow.com/questions/37755037/how-to-add-code-folding-to-output-chunks-in-rmarkdown-html-documents/37839683#37839683 and it works perfectly fine... until I try to use kableExtra elsewhere in the document.

Here is a trimmed down rmarkdown file with YAML header, where the hide/show source code script works (please note I had to replace ` with ' to get the code to display correctly on this forum)

--- 
site: bookdown::bookdown_site
output:
  bookdown::gitbook:
    fig_caption: yes
    df_print: paged
    includes:
      in_header: "./common/hideOutput.js"
---

# Prerequisites

This is a _sample_ book written in **Markdown**. You can use anything that Pandoc's Markdown supports, e.g., a math equation $a^2 + b^2 = c^2$.

'''{r}
library(tidyverse)
library(kableExtra)
#dt <- mtcars[1:5, 1:6]
#dt %>%
#  kable() %>%
#  kable_styling()

2+2
'''



<div class="fold s">
'''{r, eval=FALSE}
# Some code I don't want to show but to be accessible for interested readers...
head(mtcars)
mtcars %>%
  group_by(mpg) %>%
  summarise(nonsense = mean(cyl))
'''
</div>

If you uncomment the dt <--.... lines, the script no longer works. If I switch the two code chunks around, so kableExtra loads, and is used after the <div> it still doesn't work! I haven't the foggiest idea of what is going on....

This is what my hideOutput.js file looks like:

<script>
$(document).ready(function() {

  $chunks = $('.fold');

  $chunks.each(function () {

    // add button to source code chunks
    if ( $(this).hasClass('s') ) {
      $('pre.r', this).prepend("<div class=\"showopt\">Show Source</div><br style=\"line-height:22px;\"/>");
      $('pre.r', this).children('code').attr('class', 'folded');
    }

    // add button to output chunks
    if ( $(this).hasClass('o') ) {
      $('pre:not(.r)', this).has('code').prepend("<div class=\"showopt\">Show Output</div><br style=\"line-height:22px;\"/>");
      $('pre:not(.r)', this).children('code:not(r)').addClass('folded');

      // add button to plots
      $(this).find('img').wrap('<pre class=\"plot\"></pre>');
      $('pre.plot', this).prepend("<div class=\"showopt\">Show Plot</div><br style=\"line-height:22px;\"/>");
      $('pre.plot', this).children('img').addClass('folded');

    }
  });

  // hide all chunks when document is loaded
  $('.folded').css('display', 'none')

  // function to toggle the visibility
  $('.showopt').click(function() {
    var label = $(this).html();
    if (label.indexOf("Show") >= 0) {
      $(this).html(label.replace("Show", "Hide"));
    } else {
      $(this).html(label.replace("Hide", "Show"));
    }
    $(this).siblings('code, img').slideToggle('fast', 'swing');
  });
});
</script>