Question

I am trying to create a table, whereas when the user clicks on one of the rows, a block will slide down the same length of the table. I tried using a div, but I guess you can’t have a div anywhere in the table unless inside of a cell. Here is my current code:

<table class="table-carrier">
        <thead>
            <tr>
                <th>
                    <%= Html.Encode(SFSys.Inst.I18n.GetText("Name")) %>
                </th>
                <th>
                    <%= Html.Encode(SFSys.Inst.I18n.GetText("Value")) %>
                </th>
                <th><!-- Data to be added later --></th>
            </tr>
        </thead>
        <% foreach (var Carrier in ViewData.Model.Carriers) {  %>
        <tbody>
            <tr>
                <td class="carrier-row" onclick="$(this)
                .closest('tbody')
                .next('.section')
                .slideToggle('fast');">
                    <%= Html.Encode(Carrier.Name) %>
                </td>
                <td>
                    <%= Html.Encode(Carrier.Value) %>
                </td>
                <td>
                    <%using(Html.BeginForm("Action", "Form")) {%>
                        <input type="hidden" name="FormKey" id="FormKey" value="<%= this.Request.Url.Query %>" />
                        <input type="submit" name="action" value="<%= Html.Encode(SFSys.Inst.I18n.GetText("Change")) %>" onclick='scriptForward = true' />
                    <%}%>
                </td>
            </tr>
            </tbody>
            <tbody class="section">
            <tr>
                <td colspan="3">
                    <div >
                        <table>
                            <tr>
                                <td>left 1</td>
                                <td>right 1</td>
                            </tr>
                            <tr>
                                <td>left 2</td>
                                <td>right 2</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            </tbody>
        <% } %>
    </table>

I am able to get each section to come up on its own, but when it does this, it alters my table, slides the information down from one cell, then stretches it over. Is there a way to make the information slide down at the length of the table?

Answer 1

Although I was unable to find a proper solution, using the jQuery Accordion objects managed to create what I was looking for. More information about that can be found at jQuery Accordion