Accordion not rendering nested array elements in LWC Html

Question

I am trying to show a nested accordion,

Below is the finaldata map to be displayed in html:

[
{"Name":"Oil Gas Salt Resources Act 1990","Id":"a1S05000006zhvAEAQ","Question":"a1b05000005DzfzAAC","Type":"Title",
  "Sections":[{"Name":"4(1) Obstruction of inspector","Question":"a1b05000005Dzg4AAC","ParentQuestion":"a1b05000005DzfzAAC","Type":"Section","Id":"a1S05000006zhvBEAQ"},
             {"Name":"4(3) Refusal to produce records or make examinations","Question":"a1b05000005Dzg0AAC","ParentQuestion":"a1b05000005DzfzAAC","Type":"Section","Id":"a1S05000006zhvDEAQ"}]},
             
{"Name":"Ontario Regulation 245/97","Id":"a1S05000006zhvHEAQ","Question":"a1b05000005DzgOAAS","Type":"Title",
      "Sections":[{"Name":"7 Registration of Works","Question":"a1b05000005Dzg5AAC","ParentQuestion":"a1b05000005DzgOAAS","Type":"Section","Id":"a1S05000006zhvIEAQ"}]},
      
      
 {"Name":"OGSRA Provincial Operating Standards","Id":"a1S05000006zhvQEAQ","Question":"a1b05000005Dzf2AAC","Type":"Title",
    "**Sections**":[{"Name":"2. Injection Permits","Question":"a1b05000005DzgPAAS","ParentQuestion":"a1b05000005Dzf2AAC","Type":"Section","Id":"a1S05000006zhvREAQ",
            "**SubSections**":[{"Name":"2.3 Injection well/project construction, operation &amp; maintenance","Question":"a1b05000005Dzh2AAC","ParentQuestion":"a1b05000005DzgPAAS","Type":"Sub-Section","Id":"a1S05000006zhvSEAQ"}]
            }]
 }
]

if you notice the third row in the above object array, has nested sections:

Section & within it SubSections

Below is the html code:


<template>
    <lightning-card title="Checklist Questions">
        <lightning-accordion active-section-name="title">
            <template for:each={finalData} for:item="title">
                    <lightning-accordion-section name="title" label={title.Name} key={title.Id}>
                        <template for:each={title.Sections} for:item="section">
                            <lightning-accordion-section name={section.Name} label={section.Name} key={section.Id}>
                                <template lwc:if={section.SubSections}>
                                    <template for:each={section.SubSections} for:item="subsection">
                                        <lightning-accordion-section name={subsection.Name} label={subsection.Name} key={subsection.Id}>
                                            sub data
                                        </lightning-accordion-section> 
                                    </template>
                                </template>
                            </lightning-accordion-section> 
                        </template>
                    </lightning-accordion-section>
            </template> 
        </lightning-accordion>
    </lightning-card>
</template>

it shows the accordion till "Sections" array, but not the "SubSections", as not every Section has a property "SubSections" , I am checking using If directive in html. When i click the Section level accordion, it does not show the Subsections accordion.

Once click "2. Injection Permits", then section collapses and goes back to parent accordion which is "OGSRA Provincial Operating Standards"

Appreciate your help. Wondering what is wrong with the html code.

sfdcfox · Accepted Answer · 2024-07-12 21:12:00Z

It appears that the Salesforce implementation doesn't support nested accordions properly, even though the Accordion blueprint does. As such, you'll have to write your own custom component to control it properly. Here's a basic copy-paste example to help you get started with this task.

CSS:

div.hide-children::before {
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/> </svg>');
    width: 20px;
}
div.show-children::before {
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/> </svg>');
    width: 20px;
}
div.hide-children, div.show-children {
    padding-left: 5px;
}
div.hide-children div {
    display: none;
}

JavaScript:

import { LightningElement } from "lwc";

export default class ChecklistQuestions extends LightningElement {
  finalData = [
    {
      Name: "Oil Gas Salt Resources Act 1990",
      Id: "a1S05000006zhvAEAQ",
      Question: "a1b05000005DzfzAAC",
      Type: "Title",
      Sections: [
        {
          Name: "4(1) Obstruction of inspector",
          Question: "a1b05000005Dzg4AAC",
          ParentQuestion: "a1b05000005DzfzAAC",
          Type: "Section",
          Id: "a1S05000006zhvBEAQ"
        },
        {
          Name: "4(3) Refusal to produce records or make examinations",
          Question: "a1b05000005Dzg0AAC",
          ParentQuestion: "a1b05000005DzfzAAC",
          Type: "Section",
          Id: "a1S05000006zhvDEAQ"
        }
      ]
    },

    {
      Name: "Ontario Regulation 245/97",
      Id: "a1S05000006zhvHEAQ",
      Question: "a1b05000005DzgOAAS",
      Type: "Title",
      Sections: [
        {
          Name: "7 Registration of Works",
          Question: "a1b05000005Dzg5AAC",
          ParentQuestion: "a1b05000005DzgOAAS",
          Type: "Section",
          Id: "a1S05000006zhvIEAQ"
        }
      ]
    },

    {
      Name: "OGSRA Provincial Operating Standards",
      Id: "a1S05000006zhvQEAQ",
      Question: "a1b05000005Dzf2AAC",
      Type: "Title",
      Sections: [
        {
          Name: "2. Injection Permits",
          Question: "a1b05000005DzgPAAS",
          ParentQuestion: "a1b05000005Dzf2AAC",
          Type: "Section",
          Id: "a1S05000006zhvREAQ",
          SubSections: [
            {
              Name: "2.3 Injection well/project construction, operation & maintenance",
              Question: "a1b05000005Dzh2AAC",
              ParentQuestion: "a1b05000005DzgPAAS",
              Type: "Sub-Section",
              Id: "a1S05000006zhvSEAQ"
            }
          ]
        }
      ]
    }
  ];
  // Toggles the children when a click happens
  toggleChildren(event) {
    event.target.classList.toggle('show-children');
    event.target.classList.toggle('hide-children');
    event.stopPropagation();
  }
}

HTML:

<template>
    <lightning-card title="Checklist Questions">
        <div class="show-children" onclick={toggleChildren} style="padding-left: 1em" for:each={finalData} for:item="title" key={title.Id}>
            {title.Name}
            <div class="show-children" style="padding-left: 1em" for:each={title.Sections} for:item="section" key={section.Id}>
                {section.Name}
                <div class="show-children" style="padding-left: 1em" lwc:if={section.SubSections} for:each={section.SubSections} for:item="subsection" key={subsection.Id}>
                    {subsection.Name}
                </div> 
            </div>
        </div>
    </lightning-card>
</template>

If you'd like to use SLDS, which I presume you would, start with the blueprint, and adapt it to the pattern demonstrated here.

Stack Exchange Network

Accordion not rendering nested array elements in LWC Html

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Accordion not rendering nested array elements in LWC Html

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions