You need to sign in to do that
Don't have an account?

hide and show Accordion onclick using SLDS only
iam using SLDS to show Accordion dinamically but here i am having some issue to show single Selection
when i click on single account record it is expanding all the list of account

here is my component and controller
so please help me with my Accordion component how can i expand only one row using SLDS only
when i click on single account record it is expanding all the list of account
<!--Component--> <aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller = "AccountController"> <!--Attributes--> <aura:attribute name="showEditable" type="Boolean" default = "false"/> <aura:attribute name="showReadable" type="Boolean" default = "true"/> <aura:attribute name="accountList" type="Account[]"/> <aura:attribute name="isexpanded" type="Boolean"/> <!--handler--> <aura:handler name="init" value="{! this }" action="{! c.doInit }"/> <lightning:card title = "Account Accordian" variant = "narrow"> <ul class="slds-accordion"> <aura:iteration items="{!v.accountList}" var="account"> <li class="slds-accordion__list-item"> <div class="{! 'slds-accordion__section' + (v.isexpanded ? 'slds-is-open' : '')}"> <div class="{! 'slds-section' + (v.isexpanded ? ' slds-is-open' : '')}"> <h3 class="slds-section__title slds-theme_shade"> <button aura:id = "{! account.Id}" aria-controls="{! account.Id}" aria-expanded="{!v.isexpanded}" onclick="{!c.changeState}" class="slds-button slds-section__title-action"> <span class="slds-truncate" title="Section Title"> <ui:outputText aura:id="Id" value="{! account.Name}"/> </span> </button> </h3> <div class="slds-section__content" aria-hidden="{!!v.isexpanded}" id="{! account.Id}"> <div class="slds-form slds-form_compound" style="width:40%;"> Account details <aura:if isTrue="{! v.showReadable}"> <c:AccountDetailsComponent recordId="{! account.Id}"/> <lightning:button variant="brand" label="Edit" onclick="{! c.EditShow }" /> </aura:if> <aura:if isTrue="{! v.showEditable}"> <c:editableRecordLDS recordId="{! account.Id}"/> </aura:if> </div> </div> </div> </div> </li> </aura:iteration> </ul> </lightning:card> </aura:component>
//Controller ({ doInit : function(component, event, helper) { var action=component.get('c.getAccountList'); action.setCallback(this,function(response){ var state = response.getState(); console.log('state ='+state); if (component.isValid() && state === "SUCCESS") { component.set("v.accountList", response.getReturnValue()); console.log('v.accountList='+JSON.stringify(response.getReturnValue())); } }); $A.enqueueAction(action); }, EditShow : function(component, event, helper) { component.set("v.showEditable","true"); component.set("v.showReadable","false"); }, changeState : function changeState (component){ component.set('v.isexpanded',!component.get('v.isexpanded')); } })
so please help me with my Accordion component how can i expand only one row using SLDS only
Please refer to the example here with sample code : https://developer.salesforce.com/docs/component-library/bundle/lightning:accordion/example
Regards,
Krishna Avva