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

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
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller = "AccountController">
            <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"/>

    <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}"/>
                        <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 isTrue="{! v.showEditable}">
                                    <c:editableRecordLDS recordId="{! account.Id}"/>
    doInit : function(component, event, helper) {
        var action=component.get('c.getAccountList');
            var state = response.getState();
            console.log('state ='+state);
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.accountList", response.getReturnValue());
  EditShow : function(component, event, helper) {

 changeState : function changeState (component){ 

so please help me with my Accordion component how can i expand only one row using SLDS only
Hi Rahul,

Please refer to the example here with sample code :

Krishna Avva
i guess i mentioned using SLDS only