Question

I have the following table dynamically generated from a view. I need to add click event on class=heading to to show or hide class=content.

<table>
<thead>
    <tr>
        <th class="thead">Function</th>
        <th  class="thead"">Type</th>
        @foreach (var item in Model.PackageNames)
        {
            <th class="thead">
                @item
            </th>
        }
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.PrivilegeGroups)
    {
        <tr>
            <td colspan="50">
                <div class="heading">
                    @item.Name
                </div>
            </td>
        </tr>
        <text>
            <p class="content">
                @foreach (var privilege in item.Privileges.Values)
                {
                    <tr>
                        <td>
                            @privilege.Name
                        </td>
                        <td>
                            @privilege.Type.ToString()
                        </td>
                        @foreach (var package in privilege.Packages)
                        {
                           <td>
                                @package.AccessLevel.ToString()
                           </td>
                        }
                    </tr>
                }
            </p>
        </text>
    }
</tbody>
</table>

Here is the jQuery I’m using, however it does not work.

<script type="text/javascript">
    $(document).ready(function () {
        $(".heading").click(function () {
            $(this).next(".content").slideToggle(500);
        });
    });   // -- End Ready
</script>

However, $('.content').slideToggle(); does work and toggles all elements with class=content. I want to hide only the next element. How do I make it work?

Thanks.

Answer 1

Thank you very much @Garrett Fogerlie and @saganbyte, i finally resolved it by moving class=heading from within <td>to <tr> and $(this).next(".content").slideToggle(500); works now!

@foreach (var item in Model.PrivilegeGroups ) {
        <tr class="heading">
            <td colspan="50">
                    @item.Name
            </td>
        </tr>
        <p class="content">
            @foreach (var privilege in item.Privileges.Values)
            {
                <tr>
                    <td class="thead">
                        @privilege.Name
---Rest of the code here