unable to create accordion in aem a cloud services

Hi @viveksr1,

Root Cause 

1. Coral UI DOM manipulation is discouraged in AEMaaCS.

   • AEMaaCS uses dynamic Coral rendering and reactive bindings, and direct DOM overrides often get ignored or reset by Coral runtime (especially with template overrides like yours).

2. Content Fragment Editor (CFE) is entirely SPA-driven and leverages Coral React components behind the scenes.

3. coral-multifield-template manipulation doesn't work in the same way anymore. It’s rendered via foundation registry, not raw HTML.

Try this instead:

Option 1: Use Fieldset or PanelGroup Instead of Forcing Accordion

AEM now allows visual grouping using fieldset or panelgroup Coral wrappers.

<fieldset
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
  name="./yourMultifield"
  label="Grouped Accordion Section">
  <items jcr:primaryType="nt:unstructured">
    <!-- Your form fields here -->
  </items>
</fieldset>

This will create a visually collapsible section (though not a true accordion) that’s fully supported in AEMaaCS.

Option 2: Use Coral’s <coral-panelstack> and <coral-panel> programmatically

If you still want accordion behavior and are using custom dialogs, build the layout using Coral-native APIs:

const panelStack = new Coral.PanelStack();

const panel = new Coral.Panel().set({
  label: 'My Accordion Section',
  content: 'Custom content goes here.'
});

panelStack.items.add(panel);
document.querySelector('.your-container').appendChild(panelStack);

Be cautious: injecting DOM like this in Content Fragment Editor is unsupported and might break after Adobe updates.

Option 3: Create a Custom Dialog Widget Plugin

This is the Adobe-recommended approach:

• Create a custom field component that behaves like an accordion.

• Register it in the foundation registry and call it in your dialog or schema.

• You can refer to Coral’s JS APIs to create your component using Coral.Accordion.

Hi @santoshsai ,

I have created content fragment model as you suggested but its not working.

<model
    cq:targetPath="/content/entities"
    jcr:primaryType="cq:PageContent"
    sling:resourceType="wcm/scaffolding/components/scaffolding"
    dataTypesConfig="/mnt/overlay/settings/dam/cfm/models/formbuilderconfig/datatypes"
    maxGeneratedOrder="20">
    <cq:dialog
            jcr:primaryType="nt:unstructured"
            sling:resourceType="cq/gui/components/authoring/dialog">
        <content
                jcr:lastModified="{Date}2020-05-11T10:51:40.812-05:00"
                jcr:lastModifiedBy="admin"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
            <items
                    jcr:primaryType="nt:unstructured"
                    maxGeneratedOrder="24">
                    <fieldset
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
                            name="./actionWidget"
                            label="Grouped Accordion Section">
                        <items jcr:primaryType="nt:unstructured">
                            <widgetName
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    emptyText="Enter the Name used for Action Widget"
                                    fieldDescription="Enter the Name used for Action Widget"
                                    fieldLabel="Widget Name"
                                    name="widgetName"/>
                        </items>
                    </fieldset>
            </items>
        </content>
    </cq:dialog>
</model>

@viveksr1 Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!