<!--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">
                      <div class="slds-page-header" style="cursor: pointer;" id="{!account.Id}"  data-record="{!idx}" onclick="{!c.expand}" >
                          <section class="slds-clearfix">
                              <div class="slds-float--left ">
                                
                                  <div class="slds-m-left--large">{! account.Name}</div>
                              </div>
                              </section>
                          </div>
                          <div class="slds-hide slds-p-around--medium"  id="{!account.Id}" aura:id="{!account.Id}">
                              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>
                      </aura:iteration>
                  </ul>
              </lightning:card>
</component>

({    
    
    expand : function(component,event) {
         var currentElementId = event.currentTarget.getAttribute("id");;  
        console.log("Element Id-> ",currentElementId);
        var acc = component.find(currentElementId.toString());
	  var acc1 = document.getElementById(currentElementId);
        console.log(JSON.stringify(acc));
        console.log(JSON.stringify(acc1));

           /* for(var cmp in acc1) {
        	$A.util.toggleClass(acc[cmp], 'slds-show');  
        	$A.util.toggleClass(acc[cmp], 'slds-hide');  
       }*/
             $A.util.toggleClass(acc1, 'slds-is-open');
       
	},    
    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");

  },

 }
})