How to create collapsible/expandable rows in a table based on user action in Salesforce Lightning?

Hello Prachi,

If you want  to create collapsible/expandable rows in a table based on user action in lightning then you need one Boolean value per row. Typically, the easy way to do this it to include it directly in the data, or as a related array. Here’s a simple example for you.

<aura:application extends=”force:slds”>
    <aura:attribute name=”items” type=”Object[]” default=”[]” />
    <aura:handler name=”init” value=”{!this}” action=”{!c.init}” />
    <lightning:layout multipleRows=”true”>
        <aura:iteration items=”{!v.items}” var=”item” indexVar=”itemIndex”>
            <lightning:layoutItem size=”12″>
                <h1>
                    <lightning:buttonIcon value=”{!itemIndex}” onclick=”{!c.toggle}” iconName=”{!item.expanded?’utility:chevrondown’:’utility:chevronright’}” />
                    {!item.title}
                </h1>
                <aura:if isTrue=”{!item.expanded}”>
                    <div>
                        Extra content would be shown here.
                    </div>
                </aura:if>
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layout>
</aura:application>

Here is the javascript for the component: 

({
    init: function(component, event, helper) {
        component.set("v.items", [
        { expanded: false, title: "Row 1" },
        { expanded: false, title: "Row 2" },
        { expanded: false, title: "Row 3" }
        ]);
    },
    toggle: function(component, event, helper) {
        var items = component.get("v.items"), index = event.getSource().get("v.value");
        items[index].expanded = !items[index].expanded;
        component.set("v.items", items);
    }
})

Notice here we set the Boolean value for the row I want to toggle. Doing this allows any number of rows to be collapsed/expanded as per your desire.