How to create a custom collapsible FAQs/Accordion slice that can be connected to CMS

[Mad_River]

I’m having trouble with
I am trying to create a custom accordion/FAQs slice using a repeater so that I can connect the questions and answers to the CMS. I have tried using some velo code to make the answer container collapsible which works but there is still a large gap between the items in the repeater when the container is collapsed. I would like the next item to move up when the answer container is collapsed.

Working in
Wix Studio, CMS

Site link
Here is the site link https://digitalmadriver.wixstudio.com/my-site-5/exhibitions/the-last-degree-south-pole-ski?rc=test-site

What I’m trying to do
Have a fully functioning accordion style slice that can be fully editable in the CMS.

What I’ve tried so far
This is the code that I’m currently using to get the container to collapse. If anyone could take a look and tell me if there’s something wrong that would be great.

$w.onReady(function () {
    $w('#itineraryrepeater').onItemReady(($item, itemData, index) => {
        // Store original height
        const answer = $item('#answer');
        let originalHeight = null;
        let isExpanded = false;
        
        // Start collapsed
        answer.collapse();
        
        $item('#question').onClick(() => {
            if (!isExpanded) {
                // Expand
                answer.expand();
                isExpanded = true;
            } else {
                // Collapse
                answer.collapse();
                isExpanded = false;
            }
            
            // Multiple refresh attempts
            $w('#itineraryrepeater').refresh();
            setTimeout(() => $w('#itineraryrepeater').refresh(), 50);
            setTimeout(() => $w('#itineraryrepeater').refresh(), 150);
        });
    });
});

Extra context
Please see screenshots of what it currently looks like open and closed. The issue is the space when the item is closed.

[Rob]

Thanks for the links and screenshots so we can take a look.

I’m unsure if you’ve made some updates to the site as I didn’t see that exact repeater within the link you shared. I zoomed out a bit so we can see the first accordion and what looks like a repeater but this is how it looks on my end.

If you have a different link, feel free to share it.

As for the question, usually when I see extra space within the repeaters and collapsing, I usually see it happening when the repeater is stretched to fit the section as it tries to fit out as much area as possible.

Another thing worth checking might be the section/cell height as it probably has a row height that is causing the space. When having collapsing elements, I like using Auto so that the row height is dependent on the padding of containers and the size of the text.