function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
JayeeJayee 

how to add lightning accordion onclick animation without JQuery Effect?

User-added image
Hello~ 

For now , im using custom accordion code below 
    <div class="divContainer">

        <div class="slds-p-around--medium">
            <div class="slds-grid slds-wrap slds-gutters_xx-small">
                <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-1 slds-medium-size--1-of-1 slds-m-top_x-small">
                    <ul class="slds-accordion">
                        <li class="slds-accordion__list-item">
									<section class="slds-accordion__section slds-section__title">
										<div aura:id="RS_Initiation_2" class="slds-is-open slds-transition-show">
											<div class="slds-accordion__summary slds-section__title slds-theme_shade">
												<h3 class="slds-section__title">
													<lightning:button value="RS_Initiation_2" 
															ariaExpanded="true"
															class="slds-button slds-button_reset slds-accordion__summary-action slds-custom-button"
															onclick="{!c.divAccordionClick}">
														<lightning:icon aura:id="RS_Initiation_2_open" iconName="utility:chevronright" size="x-small" class="slds-first-icon"/>
														<lightning:icon aura:id="RS_Initiation_2_close" iconName="utility:chevrondown" size="x-small" class="slds-first-icon slds-display-none"/>
														<span class="slds-truncate">
															About
														</span>
													</lightning:button>

												</h3>
											</div>

											<div class="slds-accordion__content">
												<!--DATA ENTRY POINT-->
								
												<!--DATA ENTRY POINT-->
											</div>
										</div>
									</section>
								</li>
would like to add an smooth onclick accordion animation.
what should i change my code to add an opacity annimation like user detail page hide/show
NO JQuery Will be added
 
Ajay K DubediAjay K Dubedi
Hi Jayee,

Please refer the below code snippet and change your code accordingly. Hope it helps you.
  
//AcordianDemo.cmp

<aura:component controller="AccordionAuraController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
  <!--on component load call doInit javaScript function and fetch records from server-->  
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:attribute name="conList" type="List"/>
    
    <div class="slds-m-around_x-large">
        
        <lightning:accordion >
            <aura:iteration items="{!v.conList}" var="con">
                <lightning:accordionSection name="{!con.name}" label="{!con.Name}">
                    <aura:set attribute="body">
                        <p><b>Street</b> : {!con.MailingStreet}</p>
                        <p><b>City</b> : {!con.MailingCity}</p>
                        <p><b>State</b> : {!con.MailingState}</p>
                        <p><b>Postcode</b> : {!con.MailingPostalcode}</p>
                        <p><b>Country</b> : {!con.MailingCountry}</p>
                        <p><b>Email</b> : {!con.Email}</p>
                        <p><b>Phone</b> : {!con.Phone}</p>
                    </aura:set>
                </lightning:accordionSection>
            </aura:iteration>
        </lightning:accordion>
        
    </div>
    
</aura:component>


// js Controller

({    
    doInit: function(component,event,helper){
        var action = component.get('c.getContacts');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS' && component.isValid()){
                //get contact list
                component.set('v.conList', response.getReturnValue());
            }else{
                alert('ERROR...');
            }
        });
        $A.enqueueAction(action);
    }
})

// Apex Controller

public class AccordionAuraController {
    @AuraEnabled
    public static List<Contact> getContacts(){
        List<Contact> contactList = new List<Contact>();
        for(Contact oCon : [SELECT Id, Name, Email, Phone, MailingStreet, MailingCity, MailingState, MailingPostalCode, MailingCountry From Contact LIMIT 10]){
           contactList.add(oCon); 
        }
        return contactList;
    }
}

Please select as best answer if it helps you.

Thank You,
Ajay Dubedi