title: Bootstrap/jquery click to show multiple hidden rows in a table
body: <p>I've tried several different solutions to this [found here on stack exchange] but seem unable to get my example working. </p>
  
  <p>How do I set this table up so that clicking on the 'clickable' TR shows all the hidden rows after it?</p>
  
  <p>here is the [condensed] table, note it's bootstrap3 'hover' type:</p>
  
  <pre><code>&lt;table class="table table-condensed table-hover dashboard"&gt;
  
      &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
          &lt;tr class='clickable' id="68" &gt;
              &lt;td&gt;visible row&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="collapse out budgets" id="68collapsed"&gt;
              &lt;td&gt;hidden row&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="collapse out budgets" id="68collapsed"&gt;
              &lt;td&gt;hidden row&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class='clickable' id="69" &gt;
              &lt;td&gt;visible row&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="collapse out budgets" id="69collapsed"&gt;
              &lt;td&gt;hidden row&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="collapse out budgets" id="69collapsed"&gt;
              &lt;td&gt;hidden row&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and here is the bit of JS I'm using to [try] to reveal the hidden rows.</p>
  
  <pre><code>$(".clickable").click(function() {
      var id = $(this).attr('id');
      var target = '#'+id+'collapsed';
  
      if($(target).hasClass("out")) {
          $(target).addClass("in");
          $(target).removeClass("out");
      } else {
          $(target).addClass("out");
          $(target).removeClass("in");
      }
  });
  </code></pre>
  
  <p>Clicking on the 'clickable' row, only shows the first [or maybe last] hidden TR.</p>