+ Start a Discussion
AnimeLoverAnimeLover 

show and hide Accordion

Hey guys anyone have idea about how can i show and hide my accordion row at a time using SLDS
here is my component and controller
<!--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");

  },

 }
})

 
Devi ChandrikaDevi Chandrika (Salesforce Developers) 
Hi Rahul,
You can use lightning accordian for this.
Please refer below links which might help you in this.
https://developer.salesforce.com/docs/component-library/bundle/lightning:accordion/example
https://sfdcmonkey.com/2017/06/02/collapsible-section-accordion-lightning-component/

Hope this helps you
If this helps kindly mark it as solved so that it may help others in future.

Thanks and Regards
movie apkmovie apk
This code is not working on my own website can anybody help me.

https://www.unlockmytv.co/

https://tvzion.me/


​​​​​​​https://www.morphixtv.co/​​​​​​​ (https://www.morphixtv.co/)
Aman PathakAman Pathak
Hi , I hope you have gone through the existing component Library.

https://developer.salesforce.com/docs/component-library/bundle/lightning:accordion/example
Apprach is already present, no neet to make a  custom one.

Thanks,
Aman