Expand my Community achievements bar.

How can one add items by duplicating the item type in an accordion

Avatar

Level 2

Hello,

 

I would like to know if it's possible when working with an accordion to simply copy the previous item and component type. For some context I have multiple FAQ sections with numerous items in each accordion. For example. I need to have 20 items. Each item is a text component. I'm currently having to add each item one by one. This is very time consuming. Is this possible?

 

I've added an attachment of what I'm thinking. 

 

Thank you!

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

4 Replies

Avatar

Community Advisor

Hi @Edardna,

Unfortunately, AEM does not provide a built-in “duplicate accordion item” feature inside multifields or component dialogs. Each item must be added manually through the dialog because Granite UI multifields don’t support copy/clone operations by default.

However, there are a few practical solutions depending on how your project is set up:

1. Use a Composite Multifield (Recommended)

If your accordion is using a composite multifield, authors can:

  • Click the wrench icon on an item

  • Select Copy

  • Then Paste another item inside the same multifield

This only works if your component uses the modern composite multifield pattern:

<sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
 composite="{Boolean}true"/>

If your accordion is still using the older multifield implementation, copy/paste is not available.

2. Enable Paste JSON in Multifield

You can add a small customization that adds:

  • Copy JSON of the selected item

  • Paste JSON to create a clone

This is done by adding a custom clientlib that listens for foundation-contentloaded and enhances the multifield.
It’s a common pattern used in many implementations.

3. Use CRXDE to Duplicate Nodes (Fastest for Authors)

If authors are comfortable with CRXDE or the Content Tree:

  1. Navigate to the accordion component node

  2. Expand items

  3. Right-click any item -> Copy

  4. Right-click parent items -> Paste

  5. Rename the item if needed

  6. Refresh the page editor

This instantly duplicates the entire structure including fields.

4. Add a Custom “Duplicate Item” Button (Custom Development)

If you want the exact button you showed in your mock-up, developers can add:

  • a custom Coral action button inside each multifield item

  • a JS handler that clones that item’s HTML, updates IDs, and inserts it as a new entry

  • A Sling model that persists it into the JCR

This is fully achievable but requires custom UI development.

What is NOT possible

  • AEM does not allow right-click duplicate or auto-replication of authoring dialogs out-of-the-box.

  • Core Components accordion does not include item duplication.


Santosh Sai

AEM BlogsLinkedIn


Avatar

Employee Advisor

Hello @Edardna ,

Currently, AEM’s Accordion component does not support duplicating an accordion item together with its inner components out-of-the-box. The “Copy” option only duplicates the item entry, not the text component inside it.

A simple approach to speed this up is:

Create one accordion item → add your text component inside it → copy/paste the text component directly in Edit mode.

This lets you duplicate the inner content quickly without re-adding components each time.

Avatar

Level 5

Hi @Edardna ,

AEM does not have a built-in 'duplicate accordion item' button. You must manually add each item in the dialog. If you want duplication, your developer needs to enable multi-field with composite fields, or add a custom “duplicate” action in the component dialog using Granite UI. Only then you can copy/reuse items easily.
AEM’s default accordion component does not support duplicating items. You must add each item manually unless the component is customized by developers to support a multi-field or a custom duplication feature.

Avatar

Employee

Hello @Edardna 

Based on what you described (multiple FAQ sections, 20 text items each, time‑consuming to add one by one), here’s a pragmatic path:

1. Short‑term (no development needed)
> Use the editor’s copy/paste:
> Build the first accordion section fully (20 items).
> Copy that entire Accordion component to create other FAQ sections.
> If your project exposes panel containers in the content tree, copy/paste a panel there when you need more items.

For very repetitive FAQs across multiple pages, consider:
> Creating one “master FAQ page” and copying the whole Accordion from there.

2. Medium‑term (small development effort)
> Add an FAQ‑specific template with a preconfigured Accordion and N items.
> Or introduce a simple Experience Fragment pattern for “FAQ block” so you just drop/duplicate that.

3. Long‑term (if FAQs are a central content type)
Move FAQs into Content Fragments and create an FAQ rendering that:
> Reads a list of FAQ fragments.
> Renders each as an Accordion item automatically.

This gives you:
Centralized FAQ management.
Easy reuse across many pages.
No need to manually create 20 items per page.