Selecting the 'hide' button in the html notebook generated from Rmarkdown in javascript/jquery

Question

According to the R Markdown: The Definitive Guide, you can use jquery to select elements of the notebook and modify them.

It works well for the text elements and even the code chunk, but for some reason it doesn't find neither the '.row' div nor the 'Hide/Code' button it contains.

The thing is, I wanted to change the button's theme to primary by adding the class 'btn-primary' doing :

$('button').each(function(){
  $( this ).addClass('btn-primary')
})

either in a script tag or a js chunk.

For both it changed the theme of the top right 'Code' drop-down menu (where you can hide or show all code) but not the theme of the Hide/Code buttons associated with the code chunks.

I then tried console.log($('button').length) and console.log($('.code-folding-btn').is()) which returned '1' and 'false' respectively. Doing $('div').css('border', '2px solid red') show that the divs '.row' (containing the button) and '.collapse' (containing the pre and code) aren't selected. But you can still select both pre and code !? Why?

And using CSS, you can modify those buttons easily because the classes are recognized by it, but I'd rather not have to find the bootstrap css to add to this class... Especially since I'd have to change all the states too.

I can't believe there's no way to use JS to modify those buttons, so please tell me you found one!

Thanks!

The R code used :

---
title: "R Notebook"
output: 
  html_notebook :
    code_folding: hide
---

## Testing to select Hide/Code buttons

This is an [R Markdown](http://rmarkdown.rstudio.com) Notebook. When you execute code within the notebook, the results appear beneath the code. 

```{r test-chunk}
#test chunk
```


```{js, echo=FALSE} 
$('button').each(function(){
  $( this ).addClass('btn-primary dropdown-toggle')
})
$('*').find('button').css('border', '2px solid yellow')
console.log($('button').length)
console.log($('.btn').is())
$('div').css('border', '2px solid red')
$('.row').css('border', '2px solid orange')
$('.collapse').css('border', '2px solid orange')
$('pre').css('border', '2px solid orange')
$('code').css('border', '2px solid orange')

```

which generates the following div element (not giving full html nor body because it has all the css and js script as text):

<div class="container-fluid main-container" style="border: 2px solid red;">

  <div class="fluid-row" id="header" style="border: 2px solid red;">
  
  <div class="btn-group pull-right" style="border: 2px solid red;">
    <button type="button" class="btn btn-default btn-xs dropdown-toggle btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border: 2px solid yellow;"><span>Code</span> <span class="caret"></span></button>
    <ul class="dropdown-menu" style="min-width: 50px;">
      <li><a id="rmd-show-all-code" href="#">Show All Code</a></li>
      <li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li>
      <li role="separator" class="divider"></li>
      <li><a id="rmd-download-source" href="#">Download Rmd</a></li>
    </ul>
  </div>

    <h1 class="title toc-ignore">R Notebook</h1>
  
  </div>
  
  
  <!-- rnb-text-begin -->
  <div id="testing-to-select-hidecode-buttons" class="section level2" style="border: 2px solid red;">
    <h2>Testing to select Hide/Code buttons</h2>
    <p>This is an <a href="http://rmarkdown.rstudio.com">R Markdown</a> Notebook. When you execute code within the notebook, the results appear beneath the code.</p>
    <!-- rnb-text-end -->
    <!-- rnb-chunk-begin -->
    <!-- rnb-source-begin eyJkYXRhIjoiYGBgclxuI3Rlc3QgY2h1bmtcbmBgYCJ9 -->
    <div class="row">
      <div class="col-md-12"><button type="button" class="btn btn-default btn-xs code-folding-btn pull-right" data-toggle="collapse" data-target="#rcode-643E0F361" aria-expanded="true" aria-controls="rcode-643E0F361"><span>Hide</span></button></div></div><div class="collapse r-code-collapse in" id="rcode-643E0F361">
        <pre class="r" style="border: 2px solid orange;">
          <code class="hljs" style="border: 2px solid orange;">
            <span class="hljs-comment">#test chunk</span>
          </code>
        </pre>
      </div>
    <!-- rnb-source-end -->
    <!-- rnb-chunk-end -->
    <!-- rnb-text-begin -->
    <!-- rnb-text-end -->
    <!-- rnb-chunk-begin -->
    <script type="text/javascript">
      $('button').each(function(){
        $( this ).addClass('btn-primary dropdown-toggle')
      })
      $('*').find('button').css('border', '2px solid yellow')
      console.log($('button').length)
      console.log($('.btn').is())
      $('div').css('border', '2px solid red')
      $('.row').css('border', '2px solid orange')
      $('.collapse').css('border', '2px solid orange')
      $('pre').css('border', '2px solid orange')
      $('code').css('border', '2px solid orange')
    </script>
  <!-- rnb-chunk-end -->
  </div>
  
  <div id="rmd-source-code">
    LS0tDQp0aXRsZTogIlIgTm90ZWJvb2siDQpvdXRwdXQ6IGh0bWxfbm90ZWJvb2sNCi0tLQ0KDQojIyBUZXN0aW5nIHRvIHNlbGVjdCBIaWRlL0NvZGUgYnV0dG9ucw0KDQpUaGlzIGlzIGFuIFtSIE1hcmtkb3duXShodHRwOi8vcm1hcmtkb3duLnJzdHVkaW8uY29tKSBOb3RlYm9vay4gV2hlbiB5b3UgZXhlY3V0ZSBjb2RlIHdpdGhpbiB0aGUgbm90ZWJvb2ssIHRoZSByZXN1bHRzIGFwcGVhciBiZW5lYXRoIHRoZSBjb2RlLiANCg0KYGBge3IgdGVzdC1jaHVua30NCiN0ZXN0IGNodW5rDQpgYGANCg0KDQpgYGB7anMsIGVjaG89RkFMU0V9IA0KJCgnYnV0dG9uJykuZWFjaChmdW5jdGlvbigpew0KICAkKCB0aGlzICkuYWRkQ2xhc3MoJ2J0bi1wcmltYXJ5IGRyb3Bkb3duLXRvZ2dsZScpDQp9KQ0KJCgnKicpLmZpbmQoJ2J1dHRvbicpLmNzcygnYm9yZGVyJywgJzJweCBzb2xpZCB5ZWxsb3cnKQ0KY29uc29sZS5sb2coJCgnYnV0dG9uJykubGVuZ3RoKQ0KY29uc29sZS5sb2coJCgnLmJ0bicpLmlzKCkpDQokKCdkaXYnKS5jc3MoJ2JvcmRlcicsICcycHggc29saWQgcmVkJykNCiQoJy5yb3cnKS5jc3MoJ2JvcmRlcicsICcycHggc29saWQgb3JhbmdlJykNCiQoJy5jb2xsYXBzZScpLmNzcygnYm9yZGVyJywgJzJweCBzb2xpZCBvcmFuZ2UnKQ0KJCgncHJlJykuY3NzKCdib3JkZXInLCAnMnB4IHNvbGlkIG9yYW5nZScpDQokKCdjb2RlJykuY3NzKCdib3JkZXInLCAnMnB4IHNvbGlkIG9yYW5nZScpDQoNCmBgYA==
  </div>
  
</div>