title: how to collapse a row of a table using ng-repeat and angular
body: <p>I've got a table built in html using angular 1.5 framework I want to toggle the row expansion when the glyphicon (plus sign is clicked/toggled)</p>
  
  <p>Here is what I have from the html structure</p>
  
  <pre><code>    &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Activity&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Complete&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Status&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Starts&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Ends&lt;/strong&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody ng-repeat="pp in main.userProgress"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;a class="btn btn-link"&gt;&lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;strong&gt;{{pp.activityName}}&lt;/strong&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;uib-progressbar animate="false" value="dynamic" type="success"&gt;&lt;b&gt;{{pp.percentComplete}}%&lt;/b&gt;&lt;/uib-progressbar&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;label class="label-success" ng-show="{{pp.status}}"&gt;Active&lt;/label&gt;&lt;label ng-show="{{!pp.status}}" class="label-danger"&gt;Inactive&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;{{pp.startDate | date: 'MM/dd/yyyy'}}&lt;/td&gt;
                  &lt;td&gt;{{pp.endDate | date: 'MM/dd/yyyy'}}&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="extraInfo" colspan="6"&gt;
                  &lt;td colspan="6"&gt;
                      &lt;div style="margin-left:80px"&gt;
                          &lt;p&gt;Name:&lt;/p&gt;
                          &lt;p&gt;Deadline:&lt;/p&gt;
                          &lt;p&gt;Extra Info:&lt;/p&gt;
                          &lt;p&gt;Comments:&lt;/p&gt;
                          &lt;p&gt;
                              &lt;a&gt;View Alerts&lt;/a&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/td&gt; 
              &lt;/tr&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>Is there a way to collapse and expand (hide/show) the <code>&lt;tr&gt;</code> section id'd as extraInfo without using JQuery? </p>
  
  <p>I'd appreciate any suggestions on what to try.
  -cheers</p>