Hi,

I have created a component for dispalyng list of records in page where use icon for collapse and expansion,but when i click on icon all records are dispalying but i want to show only single record should display when click on that.


<aura:component controller = "appC" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="sObjectName" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="newTask" type="Task" default="{'sobjectType':'Task'}"/>
    <aura:attribute name="tasks" type="Task[]" default="{'sobjectType' : 'Task'}"/>
    
    <ul class="slds-timeline"> 
        <div class="isExpendable slds-timeline__item_expandable slds-timeline__item_task" aura:id="expId">  
            <aura:iteration items="{!v.tasks}" var="item" >
                
                <div class="slds-media ">
                    <div class="slds-media__figure">
                        <button class="slds-button slds-button_icon"
                                onclick="{!c.toggleAcitivity}"
                                title="test"
                                aria-controls="task-item-base">
                            <lightning:icon iconName="utility:switch" 
                                            size="x-small"
                                            class="slds-button__icon slds-timeline__details-action-icon" />
                        </button> 
                        
                        <div class="slds-icon_container" title="task">
                            <lightning:icon iconName="standard:task" size="small"/>
                        </div>
                    </div>
                    
                    <div class="slds-media__body">
                        <div class="slds-grid slds-grid_align-spread slds-timeline__trigger">
                            <div class="slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space">
                                <h3 class="slds-truncate" title="{!item.Subject}">
                                    <strong>{!item.Subject}</strong>
                                </h3>
                            </div>
                        </div>
                        
                        <p class="slds-m-horizontal_xx-small">
                            <lightning:formattedDateTime value="{!item.ActivityDate}"/> 
                        </p>
                        
                        <!-- expandable section start-->
                        <article class="slds-box slds-timeline__item_details slds-theme_shade slds-m-top_x-small slds-m-horizontal_xx-small"
                                 id="task-item-base"
                                 aria-hidden="true">
                            <ul class="slds-list_horizontal slds-wrap">
                                <li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
                                    <span class="slds-text-title slds-p-bottom_x-small">Priority</span>
                                    <span class="slds-text-body_medium slds-truncate" title="{!item.Priority}">{!item.Priority}</span>
                                </li>
                                <li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
                                    <span class="slds-text-title slds-p-bottom_x-small">Status</span>
                                    <span class="slds-text-body_medium slds-truncate" title="{!item.Status}">{!item.Status}</span>
                                </li>
                                <li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
                                    <span class="slds-text-title slds-p-bottom_x-small">Subject</span>
                                    <span class="slds-text-body_medium slds-truncate" title="{!item.Subject}">{!item.Subject}</span>
                                </li>
                                <li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
                                    <span class="slds-text-title slds-p-bottom_x-small">Due Date</span>
                                    <span class="slds-text-body_medium slds-truncate" title="{!item.Due_Date__c }">{!item.Due_Date__c}</span>
                                </li>
                            </ul>
                        </article>
                        
                    </div>
                </div>
            </aura:iteration>
        </div>
        
    </ul>
    
</aura:component>
JS.
 toggleAcitivity : function(component, event, helper) {
        $A.util.toggleClass(component.find('expId'), 'slds-is-open');