I have two pages with (I thought) identical code to manage elements in a repeater. The code expands and collapses some elements in the repeater using OnClick.
This is the code:
export function showmore_click(event, $w) {
if ( $w(“#description”).collapsed ) {
$w(“#description”).expand();
$w(“#collapse”).expand();
$w(“#expand”).collapse();
}
else {
$w(“#description”).collapse();
$w(“#expand”).expand();
$w(“#collapse”).collapse();
}
}
It works fine on one page, but on another, the button triggering showmore_click expands and collapses “#description”, “#expand” and “#collapse” in all repeater rows, not just the one I click in. I can’t figure out what the difference is that would make it perform this way… any advice?
Hi,
this happens because all the buttons points to the same element.
I find a solution for your problem, and maybe it’s not the best, but it works.
I made a repeater with a collapsed text. so when the button is pressed the text would expand/collapse just for this box.
export function button1_click(event) {
let clickedItemData = $w(“#dataset1”).getCurrentItem();
$w("#repeater1").onItemReady( ($w, itemData, index) => {
if (event.context.itemId==itemData[‘_id’]){
if ($w(‘#text1’).collapsed){
// expand what you want here.
$w(‘#text1’).expand();
}
else {
//collapse what you want here
$w(‘#text1’).collapse();
}
}
})
the bad thing in my code is checking all the items to find the pressed item.
I hope this would help you.
good luck.
4 Likes
Thanks for the suggestion… I don’t think this is quite it though… I use the same code on several other pages and the behaviour is that the expand and collapse only relate to a single repeater container, not the whole repeater. Still trying to figure this out.
My code is just collapsing the text in repeater.
you need to change the condition and collapse what you want.
@ahmdjsalhi This code worked great for me! Thank you!
