Salesforce 在lightning组件中，将表行折叠到另一个表中

我有一个要求，我需要显示帐户记录列表，每个帐户记录应保存其联系人记录，每个联系人记录还将在下面的单独一行中包含一些其他信息。 我想在每个帐户记录和联系REOCRD上都有一个可折叠的按钮。当我点击account record collapisible按钮时，它应该显示或隐藏其联系人，类似地，当我点击联系人的可折叠图标时，它应该显示或隐藏其下方的一些联系人。 这是我的示例代码

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="Accountcon" access="global" >
    <aura:attribute name="accounts" type="Account[]"></aura:attribute>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <tr class="slds-line-height_reset">
            <tr class="slds-truncate" ><b>Show</b></tr>
        <td class="slds-truncate" ><b>Name</b></td>               
        <td class="slds-truncate" ><b>Type</b></td>
        </tr>
        <aura:iteration items="{!v.accounts}" var="ac" indexVar="mylocIndex">
        <tr class="slds-hint-parent">
            <td> <lightning:buttonIcon value="{!mylocIndex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
            </td>
        <td class="slds-truncate">{!ac.Name}</td>    
        <td class="slds-truncate">{!ac.Type}</td>
            </tr>
            <aura:if isTrue="{!ac.expanded}">
               <tr class="slds-line-height_reset">
                    <td class="slds-truncate" ><b>show</b></td>
            <td class="slds-truncate" ><b>Last Name</b></td>
                       
        <td class="slds-truncate" ><b>Email</b></td>
        </tr>
                    <b>Contact details</b>
            <aura:iteration items="{!ac.Contacts}" var="con">
               
               <tr class="slds-hint-parent">
                   <td> <lightning:buttonIcon value="{!mylocIndex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
            </td>
                   <td class="slds-truncate">
                {!con.LastName}</td>
                   
                   <td class="slds-truncate">{!con.email}</td>
                </tr>
                <tr>this section should be shown or hidden onclick of collapsible button on the contact record </tr>
               </aura:iteration>
            </aura:if>
        
         </aura:iteration>
        </table>
</aura:component>




Controller.js

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getacct");
        action.setCallback(this, function(action){
            component.set("v.accounts", action.getReturnValue());
        });
        $A.enqueueAction(action);
    },
     toggle :function(component, event, helper){
       
         var items = component.get("v.accounts"); 
        
        var index = event.getSource().get("v.value");
       items[index].expanded = !items[index].expanded;
       component.set("v.accounts", items);
        
        
    }
})


Apex class: 

public class AccountsController {
      @AuraEnabled
      public static List <Account> getAccounts() {
        return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone, (select name, email, phone from contacts) FROM Account ORDER BY createdDate ASC limit 10];
      }
}

在我的代码中，当我单击contact中的可折叠图标时，它会隐藏整个contacts部分。在此方面的任何帮助都将不胜感激。 多谢各位