具有多个继承级别的表-JQuery

Question

I have a project class and the inheritance goes Projects have Sections, Sections have groups, and groups have tasks. Now I am displaying all of these in a table. The table is created using this code.

<table class="table table-condensed table-hover" border="1">
    <tr style="background-color: black; color: white">
        <th></th>
        <th>Manual/Group/Section</th>
        <th>Task</th>
        <th>Delete</th>
    </tr>
    @foreach (Manual manual in ViewBag.mlist)
    {
        <tr class="manualHeader no-hover jd-green">
            <th style="text-align:center"><input type="checkbox" /></th>
            <th>Manual Name @manual.name</th>
            <th></th>
            <th style="text-align:center"><button>Add Section</button></th>
        </tr>
        foreach (Section sections in @manual.sections)
        {
            <tr class="sectionHeader no-hover jd-yellow">
                <th style="text-align:center"><input type="checkbox" /></th>
                <th>Section Name : @sections.name</th>
                <th></th>
                <th style="text-align:center"><button>Add Group</button></th>
            </tr>
            foreach (Group group in @sections.groups)
            {
                <tr class="groupHeader no-hover jd-gray">
                    <th style="text-align:center"><input type="checkbox" /></th>
                    <th>Group Name : @group.name</th>
                    <th></th>
                    <th style="text-align:center"><button>Add Task</button></th>
                </tr>
                foreach (Task task in @group.tasks)
                {
                    <tr>
                        <th style="text-align:center"><input type="checkbox" /></th>
                        <th></th>
                        <th>Task Name:<input type="text" style="width:100%" value="@task.name" name="@task.name" /></th>
                        <th></th>
                    </tr>
                }
            }
        }
    }
</table>

The Script I am using to handle the toggling consists of this code

<script>
    $(document).ready(function () {
        $(".manualHeader").click(function () {
            $(this).nextUntil(".manualHeader").toggle();
        });
        $(".sectionHeader").click(function () { $(this).nextUntil(".manualHeader, .sectionHeader").toggle(); });
        $(".groupHeader").click(function () { $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").toggle(); });
    });
</script>

Now I get why it isn't working properly, When you toggle lets say a group so all the tasks under it are hidden, then you toggle the manual which that group exists in and everything except the tasks that were hidden by clicking the group previously. And I understand why this is happening due to the use of toggle() with untilNext() in my Script. My question is how do I fix it with some sort of conditional to check the visibility or something.

Answer 1

<script>
    $(document).ready(function () {
        $(".manualHeader").click(function () {
            var anyHidden = false;
            var allHidden = true;
            $(this).nextUntil(".manualHeader").each(function () {
                if ($(this).is(":visible"))
                    allHidden = false;
            });
            if (allHidden)
                $(this).nextUntil(".manualHeader").each(function () {
                    if ($(this).is(".sectionHeader"))
                        $(this).show();
                });
            else
                $(this).nextUntil(".manualHeader").hide();
        });
        $(".sectionHeader").click(function () {
            var anyHidden = false;
            var allHidden = true;
            $(this).nextUntil(".manualHeader, .sectionHeader").each(function () {
                if ($(this).is(":visible"))
                    allHidden = false;
            });
            if (allHidden)
                $(this).nextUntil(".manualHeader, .sectionHeader").each(function () {
                    if ($(this).is(".groupHeader"))
                        $(this).show();
                });
            else
                $(this).nextUntil(".manualHeader, .sectionHeader").hide();
        });
        $(".groupHeader").click(function () {
            var anyHidden = false;
            var allHidden = true;
            $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").each(function () {
                if ($(this).is(":visible"))
                    allHidden = false;
            });
            if (allHidden)
                $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").show();
            else
                $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").hide();
        });
    });
</script>

This works to do what was wanted to be done