Expanding a field in a repeater

Ask the community
,
1

This is my repeater with all of its content shown

What I’m trying to do - By default Field 2 to in both containers will be collapsed. Then when an Add button is pressed Field 2 in that particular container will expand.

Here’s my code

$w('#field2').collapse();

export function addbtn_click(event) {
    
    let $item = $w.at(event.context);
    $item("#field2").expand();
  
}

But when I press an Add button nothing happens.

Curiously! When I run the following code I kind of get the desired result but in reverse i.e. if I click an Add button Field 2 of that container disappears.

export function addbtn_click(event) {
    
    let $item = $w.at(event.context);
    $item("#field2").collapse();
  
}

This makes me think that that my issue has something to do with the way I collapsed the input fields initially?

On a bit of a tangent. In an ideal world, I would have a separate repeater for the input fields which would then be nested inside the repeater shown, but as far as I can tell this isn’t possible??? This would allow the add button to create a new item in a collection and corresponding fields would then appears in the repeater which is nested in the main repeater.
My work around is to manually create as many fields as I hope are necessary, collapse them and then expand them when the user presses the Add button.

2

So I tried to recreate your issue with the same exact code and it worked fine for me. Makes me think perhaps the issue was elsewhere? Maybe your addbtn_click(event) function wasn’t attached to an event handler?

Do you get any different behavior with something like this?

$w.onReady(function () {

    $w('#field2').collapse();

    $w('#addbtn').onClick((event) => {
        let $item = $w.at(event.context);
        $item('#field2').expand();
    })

});

Also note you should put anything that affects an element inside your $w.onReady() handler function but in this particular case it made no difference for me.

3

Crazy! I still can’t get it to work and I get the same result using your code. I added some console log messages to check that the onClick event handler is working and there’s no problems there.

I did a little experiment

$w.onReady(function () {

    console.log('start');

    $w('#hide').onClick((event) => {
        let $item = $w.at(event.context);
        $item('#field2').collapse();
        console.log('clicked');
    })
    $w('#show').onClick((event) => {
        let $item = $w.at(event.context);
        $item('#field2').expand();
        console.log('clicked');
    })
});

This works just fine. But unfortunately I need the field2 to collapse automatically.

I was putting my code outside onRun because that’s were Wix created the event handler.

4

It works! Thanks team, I figured it out eventually. Just had to add the following near the start of the onReady function

$w('#container1').onViewportEnter( (event) => {
        let $item = $w.at(event.context);
        $item('#field2').collapse();
    });


Field 2 is initially collapsed, the user can then hit the buttons to expand and then collapse it again.

Complete code below

$w.onReady(function () {

    $w('#container1').onViewportEnter( (event) => {
        let $item = $w.at(event.context);
        $item('#field2').collapse();
    });

    $w('#hide').onClick((event) => {
        let $item = $w.at(event.context);
        $item('#field2').collapse();
        console.log('clicked');
    })

    $w('#show').onClick((event) => {
        let $item = $w.at(event.context);
        $item('#field2').expand();
        console.log('clicked');
    })

});
5

Yeah very weird. Also to clarify yes outside the onReady is the right place for the other style of event handler but if you’re going to declare it with one of the element.onEventHandlers() then inside is.

So it sounds like your only issue then is how the initial collapse() is happening. Can you share the link to your editor?

6

I got it working thanks Anthony, see above. It seems to me that if you collapse them all in one go then you can only expand them all at once, almost like they then have a shared collapse attribute.

7

Glad you got it figured out. By collapsing in one go do you mean you were doing something like this?

$w('#element1, #element2').collapse()

Or alternatively:

$w('TextInput').collapse()