<!---Component--->
<div class="slds-p-around--large">
        <aura:iteration items="{!v.CommunicatoActivity}" var="Act" indexVar="i">
            <div class="slds-page-header" aura:id="{!i+'activity'}" style="cursor: pointer;" onclick="{!c.sectionOne}">
                <section class="slds-clearfix" >
                    <div class="slds-float--left ">
                        <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:chevronright" size="xx-small" alternativeText="Indicates add"/>&nbsp;&nbsp;
                        <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:chevrondown" size="xx-small" alternativeText="Indicates dash"/>&nbsp;&nbsp;
                    </div>
                    
                    <div class='msgContainer'>
                        <aura:if isTrue="{!v.CommunicatoActivity.Type__c == 'Incoming'}">
                            <div class="iconContainer"><img src="{!$Resource.incomingSMS}" height="20" width="20" /></div>
                            <aura:set attribute="else">
                                <div class="iconContainer"> <img src="{!$Resource.outgoingSMS}" height="20" width="20"  /></div>
                            </aura:set>
                        </aura:if>&nbsp;&nbsp;
                        <div class="numberContainer" ><a>{!Act.Phone_Number__c}</a></div>
                        <div style="margin-left: 15%;">
                            <p>You Sent a Message</p>
                        </div>
                    </div>
                </section>
            </div>
            <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
                <p><strong>Type:</strong>{!Act.Type__c}</p>
                <p><strong>Phone:</strong>{!Act.Phone_Number__c}</p>
                <p><strong>Message:</strong>{!Act.Message__c}</p>
            </div>
        </aura:iteration>
    </div>

<!------------Js----------->
doInit : function(component, event, helper) {
        var action = component.get('c.getCommunicatoActivity');
        action.setParams({ "recordId" : component.get("v.recordId") });
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state ==='SUCCESS'){
                component.set('v.CommunicatoActivity',response.getReturnValue());
            }else{
                console.log('Some Error');
            }
        });
        $A.enqueueAction(action);
        
    },
    
    sectionOne : function(component, event, helper) {
       helper.helperFun(component,event,'articleOne');
    },

<!-------Helper.Js---------------------->
helperFun : function(component,event,secId) {
      var acc = component.find(secId);
            for(var cmp in acc) {
            $A.util.toggleClass(acc[cmp], 'slds-show');  
            $A.util.toggleClass(acc[cmp], 'slds-hide');  
       }
    }

This is my code for expandable section in lightning component i get using aura:iteration
My problem is when i click on single section all section is exapanded 

<!---Component--->
<div class="slds-p-around--large">
        <aura:iteration items="{!v.CommunicatoActivity}" var="Act" indexVar="i">
            <div class="slds-page-header" aura:id="{!i+'activity'}" style="cursor: pointer;" onclick="{!c.sectionOne}">
                <section class="slds-clearfix" >
                    <div class="slds-float--left ">
                        <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:chevronright" size="xx-small" alternativeText="Indicates add"/>&nbsp;&nbsp;
                        <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:chevrondown" size="xx-small" alternativeText="Indicates dash"/>&nbsp;&nbsp;
                    </div>
                    
                    <div class='msgContainer'>
                        <aura:if isTrue="{!v.CommunicatoActivity.Type__c == 'Incoming'}">
                            <div class="iconContainer"><img src="{!$Resource.incomingSMS}" height="20" width="20" /></div>
                            <aura:set attribute="else">
                                <div class="iconContainer"> <img src="{!$Resource.outgoingSMS}" height="20" width="20"  /></div>
                            </aura:set>
                        </aura:if>&nbsp;&nbsp;
                        <div class="numberContainer" ><a>{!Act.Phone_Number__c}</a></div>
                        <div style="margin-left: 15%;">
                            <p>You Sent a Message</p>
                        </div>
                    </div>
                </section>
            </div>
            <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
                <p><strong>Type:</strong>{!Act.Type__c}</p>
                <p><strong>Phone:</strong>{!Act.Phone_Number__c}</p>
                <p><strong>Message:</strong>{!Act.Message__c}</p>
            </div>
        </aura:iteration>
    </div>

<!------------Js----------->
doInit : function(component, event, helper) {
        var action = component.get('c.getCommunicatoActivity');
        action.setParams({ "recordId" : component.get("v.recordId") });
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state ==='SUCCESS'){
                component.set('v.CommunicatoActivity',response.getReturnValue());
            }else{
                console.log('Some Error');
            }
        });
        $A.enqueueAction(action);
        
    },
    
    sectionOne : function(component, event, helper) {
       helper.helperFun(component,event,'articleOne');
    },

<!-------Helper.Js---------------------->
helperFun : function(component,event,secId) {
      var acc = component.find(secId);
            for(var cmp in acc) {
            $A.util.toggleClass(acc[cmp], 'slds-show');  
            $A.util.toggleClass(acc[cmp], 'slds-hide');  
       }
    }

This is my code for expandable section in lightning component i get using aura:iteration
My problem is when i click on single section all section is exapanded