Activity Forums Salesforce® Discussions How To Create Collapsible Section And Accordion In Salesforce Lightning Component?

  • shariq

    Member
    September 13, 2018 at 1:36 pm

    Hi,

    Below is a snippet of code for Salesforce Lightning Component  to create Accordion :

    <aura:component controller=”AccordionDemo” 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=”listOfAccounts” type=”Account[]”/> <div class=”slds-m-around_x-large”>

    <lightning:accordion >

    <!– Iterating through the list of account in lightning:accordion component –>

    <aura:iteration items=”{!v.listOfAccounts}” var=”acc”>

    <!–Showing each account as accordion section–>

    <lightning:accordionSection name=”{!acc.name}” label=”{!acc.Name}”>

    <aura:set attribute=”body”>

    <p><b>AccountNumber</b> : {!acc.AccountNumber}

    </p> <p><b>AnnualRevenue</b> : {!acc.AnnualRevenue}

    </p> <p><b>Description</b> : {!acc.Description}</p>

    <p><b>Phone</b> : {!acc.Phone}</p>

    <p><b>Website</b> : {!acc.Website}</p>

    </aura:set> </lightning:accordionSection>

    </aura:iteration>

    </lightning:accordion>

    </div>

    </aura:component>

     

    Below is the snippet of Salesforce JavaScript Controller :

    ({

    doInit: function(component,event,helper){

    var action = component.get('c.getAccounts');

    action.setCallback(this, function(response){

    var state = response.getState();

    if(state === 'SUCCESS' &amp;&amp; component.isValid()) {

    //getting the list of accounts

    component.set('v.listOfAccounts', response.getReturnValue());

    }

    else{

    alert('ERROR...');

    }

    });

    $A.enqueueAction(action); }})

     

    Below is the snippet of code forSalesforce Apex controller :

    public class AccordionDemo {

    @AuraEnabled

    public static List&lt;account&gt; getAccounts(){

    List&lt;account&gt; listOfAccounts = new List&lt;account&gt;();

    for(Account acc : [SELECT Id, Name, AccountNumber, AnnualRevenue, Description, Phone, Website From Account LIMIT 50])

    {

    listOfAccounts.add(acc);

    }

    return listOfAccounts;

    }

    }

     

    Hope this helps!

     

  • Parul

    Member
    September 24, 2018 at 2:31 am

    Use this code snippet:

    Lightning Component

     

    <aura:component >
    <div class="slds-p-around--large">

    <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionOne}">
    <section class="slds-clearfix">
    <div class="slds-float--left ">
    <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
    <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
    </div>
    <div class="slds-m-left--large">Section 1</div>
    </section>
    </div>

    <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
    section one is ready.section one is ready.section one is ready.
    section one is ready.section one is ready.section one is ready.
    section one is ready.section one is ready.section one is ready.
    </div>

    </div>
    </aura:component>

    Controller:

    ({
    sectionOne : function(component, event, helper) {
    helper.helperFun(component,event,'articleOne');
    },

    })

    Helper:

    ({
    helperFun : function(component,event,secId) {
    var acc = component.find(secId);
    for(var cmp in acc) {
    $A.util.toggleClass(acc[cmp], 'slds-show');
    $A.util.toggleClass(acc[cmp], 'slds-hide');
    }
    },
    })

    App

    <aura:application extends="force:slds">
    <c:collapseSec/>
    <!-- here c: is org. default namespace prefix-->
    </aura:application>
    Hope this helps!

    You can refer too my blog, please like if it helps!

     

    Thanks

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos