asp.net-mvc-4 - 表の行内のアコーディオン

Question

Twitter Bootstrap を使用しています。現在、私はマスター詳細が似ているテーブルに取り組んでいます。これは、各テーブルの行にアコーディオンを配置することを計画しており、展開すると、部分ビューが再ロードされて表示されます。

どういうわけか期待どおりに動作しませんが、モーダルに変更すると、部分ビューが完全に読み込まれました。

これは、値を処理して返すコントローラーです。

 public ActionResult Index(int id,int? page)
    {
        List<CustomerProduct> customerProducts =
        (from c in RepositoryProduct.Reload(id)
        select c).ToList<CustomerProduct>();
        return PartialView("_CustomerProducts", customerProducts);
    }

これはビュー内のテーブルです:

<table id="tbl" class="table table-condensed" style="border-collapse:collapse;">
            <thead>
                <tr>    
                        <th>
                           @Html.ActionLink("Customer Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                        </th>

                        <th>
                            @Html.DisplayNameFor(model => model.First().CustLocalName)
                        </th>

                        <th>                            
                             @Html.ActionLink("Country", "Index", new { sortOrder = ViewBag.CountrySortParm, currentFilter = ViewBag.CurrentFilter })
                        </th>

                        <th>
                           @Html.DisplayNameFor(model => model.First().City)
                        </th>

                    </tr>
            </thead>

            <tbody>
                @foreach (var item in Model)
                {  
                    <tr data-toggle="collapse">

                        <td style="display:none;">
                            @Html.DisplayFor(modelItem => item.CustID)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.CustName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.CustLocalName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.Country.CountryName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.City)
                        </td>

                        <td>
                            <a class="btn btn-small btn-info" type="button" href="@Url.Action("Index", "CustomerProduct", new { id = item.CustID })"  data-toggle="collapse" data-target="#@item.CustID" >Products</a>                            
                        </td>

                    </tr>

                     <tr>

                        <td colspan="6" class="hiddenRow">
                            <div id="@item.CustID" class="accordian-body collapse" tabindex="-1">
                                <div class="accordion-header">

                                    <label>
                                        <strong>@item.CustName product(s)</strong>
                                    </label>
                                </div>
                                <div class="accordion-body">TEST</div>
                            </div>
                        </td>

                    </tr>
                }

            </tbody>
    </table>

これは、コントローラーの Index 関数を呼び出すコードの一部です。

<a class="btn btn-small btn-info" type="button" href="@Url.Action("Index", "CustomerProduct", new { id = item.CustID })"  data-toggle="collapse" data-target="#@item.CustID" >Products</a>

実際には、div class="modal-body"で行ったように、 div class="accordion-body"に partialview( _CustomerProduct )をロードしたいと思いますが、成功しません。それが可能かどうか、可能であれば方法を教えてください。

どんな助けでも大歓迎です。