Collapse box in repeater when another is expanded

Ask the community
,
1

I’ve found the FAQ app to be really buggy. Not attaching to strips properly and overall a pain to use. So, I have built my own FAQ with a repeater and a database. (The added benefit is that I can update FAQ’s from the dashboard).

This is the code and it works perfectly! Except, it would be incredibly helpful if I expand a new repeater item, the previous would collapse. Is this possible? How would you do this

export function faqExpand_click(event) {
let $item = $w.at(event.context);
if( $item("#faqAnswer").collapsed ) {
    $item("#faqAnswer").expand();
    $item("#faqPlus").label = "-"
}
else {
    $item("#faqAnswer").collapse();
    $item("#faqPlus").label = "+"
}
}
2

I can think of a couple ways…

When the faqExpand_click() function is triggered - that is, when you click on expand - the first thing you should do is Repeater.forEachItem() and collapse all of the sections. Then, use the current code you have to expand the one that was chosen.

The other way would be to keep track of the currently expanded section (Repeater item), and when another section is clicked (to expand), collapse the other (saved) item, expand the newly clicked section, and then save it as the current section to be collapsed when another section is to be expanded.