Activity Forums Salesforce® Discussions What is Accordion in Salesforce lightning component?

  • Avnish Yadav

    Member
    August 16, 2018 at 1:31 pm

    Hi Prachi,

    lightning:accordion component groups related content in a single container. Only one accordion section is expanded at a time. When you select a section, it’s expanded or collapsed. Each section can hold one or more Lightning components.

    Thanks.

  • Anjali

    Member
    September 13, 2018 at 1:02 pm

    Hi Prachi,

    A lightning:accordion component displays a collection of vertically stacked sections with multiple content areas. This example creates a basic accordion with three sections.

    Component

    <aura:component render="client">
    <lightning:button onclick="{! c.handleShowActiveSectionName }" label="Show Active Section Name"/>
    <lightning:button onclick="{! c.handleSetActiveSectionC }" label="Open Section C"/>

    <lightning:accordion aura:id="accordion" activeSectionName="B">
    <lightning:accordionSection name="A" label="Accordion Title A">
    <aura:set attribute="actions">
    <lightning:buttonMenu aura:id="menu" alternativeText="Show menu" iconSize="x-small">
    <lightning:menuItem value="New" label="Menu Item One" />
    <lightning:menuItem value="Edit" label="Menu Item Two" />
    </lightning:buttonMenu>
    </aura:set>
    <aura:set attribute="body">
    <p>This is the content area for section A.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>The section height expands to fit your content.</p>
    </aura:set>
    </lightning:accordionSection>
    <lightning:accordionSection name="B" label="Accordion Title B">
    <p>This is the content area for section B.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>The section height expands to fit your content.</p>
    </lightning:accordionSection>
    <lightning:accordionSection name="C" label="Accordion Title C">
    <p>This is the content area for section C.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>The section height expands to fit your content.</p>
    </lightning:accordionSection>
    </lightning:accordion>
    </aura:component>

    Controller

    ({
    handleShowActiveSectionName: function (cmp, event, helper) {
    alert(cmp.find("accordion").get('v.activeSectionName'));
    },
    handleSetActiveSectionC: function (cmp) {
    cmp.find("accordion").set('v.activeSectionName', 'C');
    }
    })

  • Parul

    Member
    September 13, 2018 at 4:54 pm

    Hi,

    Lightning:accordion always has one section open. Each section can hold one or more Lightning components.

    <lightning:accordionSection name="{!con.name}" label="{!con.Name}">
    <aura:set attribute="body">
    <p>Street : {!con.MailingStreet}</p>
    <p>City : {!con.MailingCity}</p>
    <p>State : {!con.MailingState}</p>
    <p>Postcode : {!con.MailingPostalcode}</p>
    <p>Country : {!con.MailingCountry}</p>
    <p>Email : {!con.Email}</p>
    <p>Phone : {!con.Phone}</p>
    </aura:set>
    </lightning:accordionSection>

     

    Thanks

  • shariq

    Member
    September 14, 2018 at 1:03 am

    Hi,

    In simple language An accordion allows a user to toggle the display of a section of content.

    Salesforce Lightning Accordion:
    lightning accordion component groups related content in a single container. Only one accordion section is expanded at a time. When you select a section, it’s expanded or collapsed. Each section can hold one or more Lightning components.

    Hope this helps.

Log In to reply.

Popular Salesforce Blogs