How to add accordion to Repeater?

[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