Collapsible sections in repeaters

Hi,

I am trying to have a collapsible section within a repeater so a user can click a button and it’ll show more info. However when I click the button, it expands all the other repeater elements boxes too. How do I fix this?

// Velo API Reference: Introduction - Velo API Reference - Wix.com

$w . onReady ( function () {
$w ( ‘#open’ ). onClick (() => {
toggleBox ( $w ( ‘#new’ ));
});
});

function toggleBox ( boxElement ){
const isCollapsed = boxElement . collapsed ;
if ( isCollapsed ){
boxElement . expand ();
} else {
boxElement . collapse ();
}
}

Any help would be appreciated.

$w.onReady(function(){
	$w.onItemReady(($item, itemData, index)=>{
		$item('#open').onClick(()=>{
			toggleBox($item('#new'));
		});
	});
});

function toggleBox(boxElement){
	const isCollapsed = boxElement.collapsed;
	if(isCollapsed){
		boxElement.expand();
		boxElement.show('fade')
	}
	else{	
		boxElement.hide()
		boxElement.collapse();
	}
}