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

Ask the community
,
1

Hi everybody.

As a novice, I wish the button ( #button1AV in my example ) to change to “-” (less) when the text is visible (expanded) and back to “+” (more) when the element closes (collapsed).

here the script I have done right now :

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

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

1472×746 56.6 KB

I don’t know what function to use to change this button from “+” to “-” and where to integrate it in my script above.

Could someone help me?
Thanks a lot

2

You need to set the button’s .label property from + to - and vice versa on the onClick where you expand/collapse the text.

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();          
        });
    });
});
4

But as i can see → Jim Feuerstein gave you already a good tip here…
https://www.editorxcommunity.com/forum/general-discussions/repeater-faq-accordion-style-with-a-button-that-changes-from-to

5

@Velo-Ninja and Giri Zano, thank you for your answer and your help. I will try this.

@russian-dima I also just see your remark on my post with Jim Feuerstein. Tks a lot and have a nice weekend.