+ Start a Discussion
AnimeLoverAnimeLover 

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
User-added imageUser-added imagehere is my component and controller
<!--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
Krishna.AvvaKrishna.Avva
Hi Rahul,

Please refer to the example here with sample code : https://developer.salesforce.com/docs/component-library/bundle/lightning:accordion/example

Regards,
Krishna Avva
AnimeLoverAnimeLover
i guess i mentioned using SLDS only