How to open and close a current repeater tab with 2 OnClick event button?

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! :blush: