How to add accordion to Repeater?

[user5638]

How to add an accordion to repeater cards in Wix Studio Editor?

I’m using a repeater with 3 cards to show my service packages. I’d like to add an accordion to each card. I’ve created an accordion and try to copy and paste it into the repeater, it doesn’t add them across all cards. I also tried “Place in container” but it still doesn’t repeat. I’ve added other things like buttons and images and they repeat just fine but the accordion refuses to repeat.

[noahlovell]

Unfortunately, accordion’s can’t be added to repeaters.

That said, you can workaround it with “custom accordions” and some code.

Here’s how I have it working:

• Create a container with 2 rows (using Advanced CSS Grid)

  • Ensure the bottom row is ‘max-c’

• In the top row, add another container (Accordion Header)

• In the bottom row, add another container (Accordion Item)

• Add the content you want within these containers.

• You should have something looking like this:
  

  

• Set the ‘Accordion Item’ as collapsed by default in the Code Properties Panel

• Use a little code, something similar to this:

$w("#repeater").onItemReady(($item, itemData, index) => {
        $item("#accordionHeader").onClick(() => {
            if ($item("#accordionItem").collapsed) {
                $item("#accordionItem").expand()
            } else {
                $item("#accordionItem").collapse()
            }
        })
    })

And you should get something like this (only built on desktop to demo) - https://noahlwix.wixstudio.com/accordion-repeater