title: BootstrapJS - Nav Nav-list not collapsing on click.
body: <p>Stumped on another one. I'm using boostrapJS to create a Nav-List. Ideally the headers will remain collapsed by default, but will expand when clicked. Right now I have some javascript that will go and dynamically populate the List, but the click event seems to be doing nothing. (sort of - I click on the header and it jitters a bit, but it does not collapse). </p>
  
  <p>I've looked at the code examples, and I'm pretty sure I'm using the same classes and div structure, but It still seems to be not working, and it's not throwing any errors. </p>
  
  <p>Here is my Code: </p>
  
  <pre><code>        $('#header').append('&lt;ul class="nav nav-list"&gt;');
          for (i = 0; i &lt; len; i++) {
              k = keys[i];
              $('#header').append('&lt;label class="tree-toggle nav-header"&gt;' + keys[i] + '&lt;/label&gt;');
              for (var j in groupedtemplates[k]) {
                  $('#header').append('&lt;a href="#"&gt;&lt;li data-value=' + groupedtemplates[k][j].id + '&gt;' + groupedtemplates[k][j].attributes.im_name.value + '&lt;/li&gt;&lt;/a&gt;');
              }
          }
          $('#header').append('&lt;/ul&gt;');
  
          $(document).ready(function () {
              $('.tree-toggle').click(function () {
                  $(this).parent().children('ul.tree').toggle(200);
              });
          });
  </code></pre>
  
  <p>The HTML that it's being inserted into is just a simple container.</p>
  
  <pre><code>    &lt;div class="well" style="width:100%; padding: 8px 0;" id="header"&gt;
  
      &lt;/div&gt;
  </code></pre>