Hello the community! To resume, I need some help regarding using repeaters and onclick events to expand and collapse content in the repeater.
I am working on this page https://www.soclerh.fr/centre-de-formation to create a FAQ inspiration layout style to display what I am calling "tabs" (#description) so when we click on the button "plus" the tab expand and when we click on the button "moins" the tab collapse (moins means minus/less in French) .
The code I am using works but to a certain point. And so curently when I click on the plus button the first tab do expand and when I click on the moins button the tab do collapse.
Well, my headache starts now because when I click on the plus button of the second tab, it is the first tab which expand! And then, when I clik on other tabs I don't even know anymore the logic it is using because buttons I am clicking on are opening the upper tabs.
Iam using the following code but doesn't works the way it should in my code:
let $item = $w.at(event.context);
let clickedItemData = $item("#dataset1").getCurrentItem();
Here is the whole code I am using:
// 1. COLLAPSIBLE TABS
export function plus_click(event) {
let $item = $w.at(event.context);
let clickedItemData = $item("#dataset1").getCurrentItem();
$w("#repeater1").onItemReady( ($w, itemData, index) => {
if(event.context.itemId===itemData['_id']){
if($w('#description').collapsed){
// expand
$w('#description').expand();
$w('#moins').expand();
$w('#plus').collapse();
}
else{
//collapse
$w('#description').collapse();
$w('#moins').collapse();
$w('#plus').expand();
}
}
})
}
export function moins_click(event) {
let $item = $w.at(event.context);
let clickedItemData = $w("#dataset1").getCurrentItem();
$w("#repeater1").onItemReady( ($w, itemData, index) => {
if(event.context.itemId===itemData['_id']){
}
})
}
More details:
For me "tab" is the entire #repeater1 but what it is expanding/collapsing is the #description
I am using a dataset called #dataset1 the 2 vector buttons #plus and #moins are not linked
What to do? Thanks for you help! 😊