lightning:accordion

Winter 18 New Lightning Components  

lightning:accordion

Accordions are the vertically stacked sections which can contain many sections holding contents inside them.  This is the new component which was added as part of Winter 18 release. 

Earlier the same was build using Html and javascript code.

This components groups all of the related contents in a single container. Only one can be expanded at a time and all others will be in collapsed state.

Use attribute "activeSectionName" to select the default section you want it to be expanded.

Each section can contain one or more lightning components. The design is inherited from the accordion in lightning design system. For additional styling use the "Class" attribute with helper classes of lightning design system. 

Below is the example of how to use accordion on the lightning components. 

• Section A is expanded by default 
• Section B contains another lightning component
• Section C contains data from the javascript controller

Example Code:

AccordionCmp.component :

<aura:component>
<!-- Attribute definition --> 
   <aura:attribute type="String" name="concatStr" description="Object Name"/>

<!-- Handler definition -->
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<!-- Accordion definition -->
   <lightning:accordion activeSectionName="A">
<!-- Section A with simple text -->
     <lightning:accordionSection name="A" label="Accordion Title A">This is the content area for section A</lightning:accordionSection>
<!-- Section B with Lightning component -->
     <lightning:accordionSection name="B" label="Accordion Title B"> This is lightning component in Section B  : <c:contacts></c:contacts></lightning:accordionSection>
<!-- Section C with content from this component controller -->
     <lightning:accordionSection name="C" label="Accordion Title C">This is the content from the Javascript controller of this component in section C : {!v.concatStr}</lightning:accordionSection>
   </lightning:accordion>
</aura:component>

AccordionCmpController.js

({
doInit : function(component, event, helper) {
        var retVal = "String 1 & -" + " & String 2";
component.set("v.concatStr",retVal)
}

})

References:

Lightning Component guide