Expand and collapse individual repeater elements

Ask the community
1

Hey guys,
I’m looking for a way to do the following, maybe some of you have an answer here?

How do I add a section within a repeater element, that is initially collapsed and expands by clicking a button within the respective repeater element? To close the expanded section another button should be used. Additionally this action shall only affect the respective repeater element at a time (as by using the standard onclick events all elements expand at the same time).

Added what the element looks like below.

Thanks a lot for your support!!

2

hi there
I do not thing that collapsible text inside of the repeater will work in your case, but since multistate box is more customizable, you can try using collapsible Multistate Box: https://www.youtube.com/watch?v=VFokF7Hvo5M

3

Hey Andrew.
Thanks for your reply! It seems like a very sleak solution.
When I implement it, however the action triggers all repeater elements at once. Is there a way to limit it only to the element in which the buttons are clicked?

As I’m working with a repeater, I pull the data from my dataset and automatically populate the various multi-state boxes in the repeater.

I found this solution via Chat GPT here, but so far haven’t gotten it to work yet.

$w.onReady(function () {
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
const multiStateBox = $item(“#multiStateBox”);
const container = $item(“#container”);
const button1 = $item(“#button1”);
const button2 = $item(“#button2”);

    button1.onClick(() => { 
        multiStateBox.changeState("State 2"); 
        container.show(); 
    }); 

    button2.onClick(() => { 
        multiStateBox.changeState("State 1"); 
        container.hide(); 
    }); 
});

});

What do you think?

4

And…I also found a solution to use with the standard repeater with the help of Chat GPT (without using multi state boxes). The code for it looks like this.

$w.onReady(function () {
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
let isExpanded = false;
$item(“#boxElement”).collapse();
$item(“#collapseButton”).hide();
$item(“#expandButton”).show();
$item(“#expandButton”).onClick(() => {
if (!isExpanded) {
$item(“#boxElement”).expand();
$item(“#collapseButton”).show();
$item(“#expandButton”).hide();
isExpanded = true;
}
});
$item(“#collapseButton”).onClick(() => {
if (isExpanded) {
$item(“#boxElement”).collapse();
$item(“#collapseButton”).hide();
$item(“#expandButton”).show();
isExpanded = false;
}
});
});
});

It works well and the only little flaw that probably could be fixed with the multi state box, is that after closing the box, the viewport doesn’t move back to the repeater element, that was interacted with, but stays and one would have to scroll back up.

5

Unfortunately I’m not code expert, so my advices in terms of code may lack of expetness, but we can offer you to reach to one in our Customer Care Velo team - https://support.wix.com/en/article/contacting-wix-customer-care-for-support

GPT is not very familiar with Velo, as per my experience so it may lack of performance