Lightning Accordian Tag in Lightning Experience

Aakanksha Singh

7 years ago

Generally to create an accordian slider we require a few lines of html elements, css and some script. Wouldn’t it be wonderfull, if we could create the slider by just using the tags. In Lightning Experience we can create it by just using tag. Yes, you heard it right, with the help of lightning:accordion and lightning:accordionSection. Let’s know more about the tags.

Lightning Accordian Tag

Both the tags will work in API version 41.0 or later. If you have the earlier version of the components, you just have to update metadata file of the component. First of all we will discuss about the tags and their attributes.

lightning:accordion

1) activeSectionName: You can write the name of the tab, the tab will be open by default.
2) class: Adds extra css to the element.
3) title: Title of the icon appears when you hover mouse over it.

lightning:accordionSection

1) actions: Through this attribute you can enable custom menu implementation.
2) class: Adds extra css to the element.
3) title: Title of the icon appears when you hover mouse over it.
4) label: It is displayed as the title of the action.
5) name: The name is unique for each accordian section.

Here is the example:

<aura:application extends="force:slds">
	<!--
	/**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
	-->
    <lightning:accordion activeSectionName="Tab 2">
    	<lightning:accordionSection name="Tab 1" label="Accordion Tab 1">
        	<ui:outputText value="Content of Tab 1"/>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. 
            </p>
        </lightning:accordionSection>
    	<lightning:accordionSection name="Tab 2" label="Accordion Tab 2">
            <ui:outputText value="Content of Tab 2"/>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. 
            </p>
        </lightning:accordionSection>
    	<lightning:accordionSection name="Tab 3" label="Accordion Tab 3">
        	<ui:outputText value="Content of Tab 3"/>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. 
            </p>
        </lightning:accordionSection>
    </lightning:accordion>
    
</aura:application>

Output

Here is the output:

Support

That’s all about Lightning Accordian Tag in Lightning Experience, for any further queries feel free to contact us at:
https://wedgecommerce.com/contact-us/
Or let us know your views on how to make this code better, in comments section below.