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

Ask the community
3

Here’s another version where I permit only one text box to be expanded at a time. Note that I use ‘forEachItem’ to perform a function on each item but ‘at’ where I wanted to deal with the specific item where the click occurred.

Also note (because I don’t think it’s obvious when you just glance at the code) that I’ve got a NOT operator (!) in front of the boolean that’s testing to see if the textBox is collapsed).

function closeOpenItems() {
  $w("#myRepeater").forEachItem(($item, itemData, index) => {
    if (!$item("#textBox").collapsed) {
      $item("#textBox").collapse();
      $item("#expandBtn").label = "+";
    }
  });
}

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