Bootstrap 3 Accordion Effect on Table is very slow

Question

I have a table which has 56 columns. We did not want any horizontal scrolling, so we decided to try an accordion effect, where the user clicks on a row (shows 7 columns by default) and it expands downwards displaying the rest of the data. When expanded, it is a total of 15 rows.

Now, when I have any more than ~5 initial rows (before expansion) displayed, it becomes veeeeery slow to perform the accordion. My guess is, because it has to re-position the table whenever this happens, the performance drastically drops with more rows displayed.

Nothing else on this webpage performs poorly. I have .table-hover applied and that never causes any sort of lag.

I am currently populating the table with just placeholder data via JSP, so I'm sure once I'm actually querying the database performance will drop again.

<table class="table table-hover table-condensed">
    <thead>
        <th></th><th nowrap>Column</th><th nowrap>Column</th>
        <th nowrap>Column</th><th nowrap>Column</th><th nowrap>Column</th>
        <th nowrap>Column</th><th nowrap>Column</th>
    </thead>
    <tbody>
        <%
            for(int i = 0; i < 25; i++) {%>
                <tr data-toggle="collapse" data-target="<%out.print(".record" + i);%>" class="clickable">
                    <td>
                        <div class="form-group">
                            <div class="btn-group">
                                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-remove-sign"></span></button>
                                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
                                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button>
                                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus-sign"></span></button>
                             <div>
                         </div>
                    </td>
                    <td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
                </tr>
                <%
                    for(int j = 0; j < 7; J++)
                    {%>
                        <tr>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>"></div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                            </tr>
                            <tr>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>"></div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                            </tr>
                      <%}
                   }
                 %>
            </tbody>
       </table>

Any assistance on possibly speeding this up would be great. I don't know if it's possible to, instead of pushing everything down, the accordion effect just kind of overlays over whatever is underneath? If that makes any sense.

EDIT: CSS Besides Bootstrap, I don't have much extra CSS currently applied, but here it is.

<style type="text/css">
    td {
        white-space:nowrap;
    }

    body {
        padding-top: 50px; 
    }

    .hiddenRow {
        padding: 0 !important;
    }

    table .btn{
      padding: 1px 5px 1px;
      margin-right: -3px;
    }

</style>

Answer 1

You should give the <tr>'s the class .collapse, not the <div>'s.

So change your code from:

<tr>
    <td class="hiddenRow">
         <div class="collapse <%out.print("record" + i);%>">xxx</div>
    </td>
</tr>

to:

<tr class="collapse <%out.print("record" + i);%>">
    <td class="hiddenRow">
         <div>xxx</div>
    </td>
</tr>