0

There a way to have not have a default section open on page load? Such as when the page loads all sections are closed and will only open when clicked ?

2

Yes you are looking for lightning accordian with mutiple section open where you have the choice to provide which section should be opened initially you can provide an empty list which will make all section closed initially,

<aura:component>

    <aura:attribute name="activeSections" type="List" default="" />
    <aura:attribute name="activeSectionsMessage" type="String" default="" />

    <p>{! v.activeSectionsMessage }</p>

    <lightning:accordion
        allowMultipleSectionsOpen="true"
        onsectiontoggle="{! c.handleSectionToggle }"
        activeSectionName="{! v.activeSections }" >
        <lightning:accordionSection name="A" label="Accordion Title A">
            <aura:set attribute="actions">
                <lightning:buttonMenu aura:id="menu" alternativeText="Show menu" menuAlignment="right" 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>

in above code you can provide any value to "activeSections" attribute like

 <aura:attribute name="activeSections" type="List" default="['A','C']" />

to keep A and c Opened or empty to keep all closed.

https://developer.salesforce.com/docs/component-library/bundle/lightning:accordion/example#lightningcomponentdemo:exampleAccordionMultiple

| improve this answer | |
  • So, if the list is blank will all section remain closed? – manjit5190 Mar 21 at 11:22
  • 1
    @manjit5190 yes empty like <aura:attribute name="activeSections" type="List" default="" /> and it will remain closed unitl you click and expand them – User6670 Mar 21 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.