Lightning Collapsible and Accordion Dynamic aura id for sections

Try using lightning:accordion and lightning:accordionSection components which is very simpler for handling.

Reference: lightning:accordion

Check this out:

Component:

<aura:component controller="AccountsController">
<aura:attribute name="accounts" type="Account[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<lightning:accordion activeSectionName="B">
    <aura:iteration items="{!v.accounts}" var="acc" indexVar="ind">
        <lightning:accordionSection name="{!ind}" label="{!acc.Name}">
            {!acc.Name} - {!acc.Phone}
             //Add your table & data here
        </lightning:accordionSection>
    </aura:iteration>
</lightning:accordion>        

Controller:

doInit : function(component, event, helper) {
    helper.getAccountAndContactsRelation(component);
}

Helper:

 getAccountAndContactsRelation : function(cmp) {
    var action = cmp.get("c.getAcc");
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            console.log('response.getReturnValue()',response.getReturnValue());
            cmp.set("v.accounts", response.getReturnValue());


        }
    });
    $A.enqueueAction(action);
}

Class:

public class AccountsController {

    @AuraEnabled
    public static List<Account> getAcc(){
        return [SELECT id,name,Phone FROM Account LIMIT 4];
    }
}

Hope this helps.