Как скрыть и показать строки GridView по щелчку элемента заголовка с помощью Javascript?

У меня есть GridView с такой структурой:

• заголовок группы

  • начальник отдела

    • (some person entity)
    • (какая-то личность)
    • (какая-то личность)

  • начальник отдела

    • (some person entity)
    • (какая-то личность)
    • (какая-то личность)

• заголовок группы

  • начальник отдела

    • (some person entity)
    • (какая-то личность)
    • (какая-то личность)

  • начальник отдела

    • (some person entity)
    • (какая-то личность)
    • (какая-то личность)

Хотя у меня есть Javascript, который переключает заголовок отдела и подэлементы, которые работают должным образом, переключение не работает на уровне заголовка группы, потому что можно переключать подэлементы одного заголовка отдела, но не другого заголовка отдела, поэтому, когда переключение активированный на уровне заголовка группы, он просто инвертирует переключение, чего я не хочу, поэтому я попытался написать некоторый Javascript, который при нажатии на заголовок группы просто скрывал бы все параллельные строки независимо от состояния переключения до следующего заголовка группы если они не были скрыты, иначе щелчок по заголовку группы покажет/развернет скрытые строки независимо от состояния переключения до следующего заголовка группы.

Однако мне не удалось разработать код, чтобы при щелчке по заголовку группы он скрывал все следующие строки до следующего заголовка группы, если они не скрыты, иначе их показывает. В настоящее время я сталкиваюсь с "JavaScript runtime error: Unable to get property 'display' of undefined or null reference" в строке if (el.style.display != 'none'), что говорит о том, что я неправильно манипулирую объектами, но я не уверен, какими obj или attr нужно манипулировать, чтобы получить желаемый эффект из-за того, что я новичок в Javascript.

Javascript:

<script type="text/javascript">
    $(function () {
        $('.group-header').click(function () {
            $(this).nextUntil('.group-header').each(function () {
                var el = this;
                if (el.style.display != 'none') {
                    el.style.display = 'none';
                }
                else {
                    el.style.display = '';
                }
            }())
        });
    });

    $(function () {
        $('.dept-header').click(function () {
            $(this).nextUntil('.dept-header, .group-header').toggle();
        });
    });
</script>

Для справки мой код Razor:

<table id="companyGrid" class="table table-bordered table-striped grid">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Designation)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Department)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Company)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Year)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Salary)
        </th>
    </tr>
    @foreach (var group in Model.GroupBy(x => x.Company))
    {
        <tr class="group-header">
            <td colspan="7">
                <span class="h2">@group.Key</span>
            </td>
        </tr>
        foreach (var dept in group.GroupBy(x => x.Department))
        {
            <tr class="dept-header">
                <td colspan="6">
                    <span class="h4">@dept.Key</span>
                </td>
            </tr>
            foreach (var item in dept)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Designation)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Department)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Company)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Year)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Salary)
                    </td>
                </tr>
            }
        }
        <tr class="group-footer">
            <td colspan="6" class="text-center">
                <span class="label label-info">Company: @group.Key</span>
                <span class="label label-success">Total Employee: @group.Count()</span>
                <span class="label label-primary">Avg Salary: @group.Average(x => x.Salary).ToString("C")</span>
            </td>
        </tr>
    }
</table>