Repeater (faq accordion style) with a button that changes from "+" to "-".

Ask the community
,
3

My question why you are going the —> forEachItem-Way instead of using the onItemReady-Way?

Here we can see how you try to generate an INIT-Function…

$w.onReady(function () {
    initAVrepeater();
});

function initAVrepeater() {
    $w('#AVrepeater').forEachItem(( $item, itemData, index) => {
        $item(`#buttonAv1`).onClick(() => {
            $item(`#textAv1`).collapsed ? $item(`#textAv1`).expand() : $item(`#textAv1`).collapse()       
        })
    })
}

But all these is not neccessary, since the onItemReady-method do this automaticaly for you (after you have pulled data into your repeater).

This for please read the following post, which will teach you, how to work a better way with repeaters.

You will also recognize, what kind of problem existing, when working with repeaters and how to solve it…

In your case…

$w.onReady(()=> {
    $w('#AVrepeater').data = someDataHere; //<---- feeding repeater with some DATA.

    $w('#AVrepeater').onItemReady(($item, itemData, index)=> {
        console.log("onItemReady running!");    
        
        $item('#buttonAv1').onClick((event) => { 
            console.log("Element --> "+event.target.id+" clicked!");
            console.log("Selected-Item-Data: ", itemData);
            console.log("Index: ", index);  

            if($item(`#textAv1`).collapsed) {
                $item(`#textAv1`).expand(); 
                $item('#buttonAv1').label = "-";
            }
            else {
                $item(`#textAv1`).collapse(); 
                $item('#buttonAv1').label = "+";
            }

            // your old version....
            //$item(`#textAv1`).collapsed ? $item(`#textAv1`).expand() : $item(`#textAv1`).collapse();          
        });
    });
});