function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Atul SinghAtul Singh 

Expandable section Problem In Lightning

<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 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>
                        <div class="numberContainer" ><a>{!Act.Phone_Number__c}</a></div>
                        <div style="margin-left: 15%;">
                            <p>You Sent a Message</p>
            <div class="slds-hide slds-p-around--medium" aura:id="articleOne">

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'){
                console.log('Some Error');
    sectionOne : function(component, event, helper) {

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 
Vinod Kumar 352Vinod Kumar 352
Hi Atul Singh,
Did you find the solution? Currently I am facing the same problem in one of my requirement. 
Balasubramaniam 07Balasubramaniam 07
aura:id doesn't support expressions. You can only assign literal string values to aura:id.

You can use normal html id attribute and use the same to toggle the class


You cannot use aura:id for this as it can take string values only as your sections are getting created dynamically so you can create the dynamic classes or id and can hide or show your component on the basis of that.

Hope, this will help you!!