How to expand just 1 item from a repeater?

Ask the community
,
1

I have created a custom FAQ section using a repeater. I would like to open only one collapsed item at a time. I have my repeater connected to a dataset which holds the questions and answers.

Heres what happens currently:

Heres the functionality Im looking for:

Heres the code I have currently:

$w.onReady(function () {

});

export function container2_click(event) {

if( $w("#text45").collapsed ) {
    
    $w("#text45").expand();
    $w('#arrowUp').show();
    $w('#arrowDown').hide();
}
else {

    $w("#text45").collapse();
    $w('#arrowUp').hide();
    $w('#arrowDown').show();
}
}

I have read through the repeater API but couldn’t find a solution. Any help would be great.

Thanks.

2

Bill, there are some subtle concepts to digest in the repeater documentation. Re-read the portion called “Repeated Item Scope”.

Here’s how it would go with your code:

export function container2_click(event) {
let $item = $w.at(event.context);
if( $item("#text45").collapsed ) {
    
    $item("#text45").expand();
    $item('#arrowUp').show();
    $item('#arrowDown').hide();
}
else {

    $item("#text45").collapse();
    $item('#arrowUp').hide();
    $item('#arrowDown').show();
}
}
3

There is also this example that you can look at too.
https://www.wix.com/corvid/example/collapse-elements
https://www.totallycodable.com/wix/corvid/create-custom-faq-with-double-collapse-effect

4

@tony-brunsman thank you! ill have a re read.

5

Thank you @givemeawhisky