How can I make the menu folding/unfolding function? (double layer)

Question

I'm making a menu folding/unfolding function. When there is one submenu, it is completed, but the problem is when there are two submenus. When you unclick a menu with the expand function, all of the expanded submenus are not closed, but only the first submenus are closed.

When I unclick a menu with the expand function, how do I close all of the expanded submenus?

Thank you. This is my code.

"The BiG One" is the main menu with onclick event.
"First SubMenu" is the first submenu, "Second SubMenu" is the second submenu.
If I click the "The BiG One", the "First SubMenu" should be opened, and If I click the "First SubMenu", the "Second SubMenu" should be opened.
And If I click again "The BiG One", "First SubMenu", "Second SubMenu" should be unfolded together.

• HTML

  <tr >
            <td style="background-color:white;" onclick={schedulingClick}>
                <div class="interval-same">
                    <span>The BiG One</span>
                    <span>&#9660;</span>
                </div>
            </td>        
            <template for:each={records} for:item="record">
                    <td key={record.id}>
                        {record.BM_DPM_EOQ__c}
                    </td>
            </template>
        </tr>   

  
        <tr >  
            <td style="background-color:#FFF2CC" if:true={schedulingPeople} onclick={beforeNoonClick}>
                <div class="interval-same">
                    <span>ㄴFirst SubMenu</span>
                    <span>&#9660;</span>
                </div></td>
            <template for:each={records} for:item="record">
                                    <td key={record.id} if:true={schedulingPeople} style="background-color:#FFF2CC">
                                        {record.BM_DPM_EOQ__c}
                                    </td>
            </template>
        </tr>

    <tr > 
        <td style="background-color:#FFF2CC" if:true={beforeNoonDetails}>
         ㄴㄴSecond SubMenu</td>
        <template for:each={records} for:item="record">
                                <td key={record.id} if:true={beforeNoonDetails} style="background-color:#FFF2CC">
                                    {record.BM_DPM_EOQ__c}
                                </td>
        </template>
    </tr>
    <tr > 
        <td style="background-color:#FFF2CC" if:true={beforeNoonDetails}>
         ㄴㄴSecond SubMenu</td>
        <template for:each={records} for:item="record">
                                <td key={record.id} if:true={beforeNoonDetails} style="background-color:#FFF2CC">
                                    {record.BM_DPM_EOQ__c}
                                </td>
        </template>
    </tr>

• JS

    schedulingPeople = false;
    beforeNoonDetails = false;

    schedulingClick(){
        this.schedulingPeople = !this.schedulingPeople;
    }
   

    beforeNoonClick(){
        this.beforeNoonDetails = !this.beforeNoonDetails;
    };