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

Ask the community
2

You might want to post this question on the Velo forum, where you’ll find more people with expertise: https://www.wix.com/velo/forum/coding-with-velo

I’m a Velo beginner, but, FWIW, my code was a bit different. I tested it, and it works. That is, when you click the button in any specific repeater item, the text in that item (textBox) expands and the label on the button (expandBtn) for that item is changed to ‘-’.

If you click that button again, in the same item, the text box collapses and the button label reverts to ‘+’.

export function expandBtn_click(event) {
     let $item = $w.at(event.context);
    if ($item('#textBox').collapsed) {
        $item('#textBox').expand() ;
        $item('#expandBtn').label = "-";
    } else {
         $item('#textBox').collapse() ;
        $item('#expandBtn').label = "+";
    }
    
}

I’m using $w.at(event.context) to ensure I’m dealing with the specific repeater item where the click occurred.

Again emphasizing that I’m a beginner, I don’t think ‘forEachItem’ is the best way to establish ‘onClick’ behavior in a repeater. ‘At’ seems to be intended for that purpose. See the documentation: at - Velo API Reference - Wix.com

Note: If you want any already-expanded items to close whenever you expand a different item (that is, if you want only one item to show at a time), you’d need to add a bit of code to collapse any other expanded items when a new item is expanded.