How to expand only 1 item from a repeater?

Ask the community
,
1

I currently have a functioning repeater that displays the correct information when expanded. The only issue is that when I click expand, its expands all of the items on the repeater instead of just the one that was selected. Any ideas on how to fix this issue?

Here is my current code:
#vectorImage1 is the arrow pointing down to expand the item
#vectorImage2 is the arrow pointing up to collapse the item

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
    $w("#repeater1").onItemReady(() => {
        if ($w('#box12').collapsed) {
         $w("#vectorImage2").hide();
        }
        else $w("#vectorImage1").show();
        })
    })
});

export function vectorImage1_click(event) {
 let $item = $w.at(event.context);
 if ($w('#box12').collapsed) {
     $w('#box12').expand();
     $w("#vectorImage2").show();
     $w("#vectorImage1").hide();
 }
 else 
     $w("#box12").collapse();
}

export function vectorImage2_click(event) {
 let $item = $w.at(event.context);
 if ($w('#box12').expand) {
     $w('#box12').collapse();
     $w("#vectorImage1").show();
     $w("#vectorImage2").hide();
 }
 else 
     $w("#box12").expand();
}
2

See:
https://www.wix.com/corvid/reference/$w/repeater/onitemready

3

I checked out that link and am still quite confused on how to fix the issue. I have .onItemReady() included in the code above. Could you please explain what needs to change?

4

See in red:

$w("#repeater1").onItemReady(($i, iData) => {
        if ($i('#box12').collapsed) {
         $i("#vectorImage2").hide();
        }
        else $i("#vectorImage1").show();
        })
5
  • crate the event handlers the same (inside the onItemReady).
    alternatively, use $w.at as you currently do, but use $item instead of $w
6

@jonatandor35 Thank you it works perfectly now! For anyone seeing this in the future, here is our code that works correctly:

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
    $w("#repeater1").onItemReady(($i, iData) => {
        if ($i('#box12').collapsed) {
        $i("#vectorImage2").hide();
        }
        else $i("#vectorImage1").show();
        })
    })
});

export function vectorImage1_click(event) {
 let $item = $w.at(event.context);
 if ($item('#box12').collapsed) {
     $item('#box12').expand();
     $item("#vectorImage2").show();
     $item("#vectorImage1").hide();
 }
 else 
     $item("#box12").collapse();
}


export function vectorImage2_click(event) {
 let $item = $w.at(event.context);
 if ($item('#box12').expand) {
     $item('#box12').collapse();
     $item("#vectorImage1").show();
     $item("#vectorImage2").hide();
 }
 else 
     $item("#box12").expand();
}