Hello all,
I am using Wix Editor Code to create a collapsible section with the help of repeaters. I am curious to know how I can create the interaction of clicking on the arrow in order for the section to collapse and at the same time make the arrow turn 180 degrees. So far, with the current code I am using I am able to click on the title/name button and trigger the collapsing.
In the code below, “repeater 1” is the first repeater in the series, ‘servicebutton1’ is the full title (button) (the arrow icon and price are layered on top of the button), ‘ServiceRepeater1’ is the full list of repeaters, ‘servicecontent1’ is the container that opens and collapses.
This is the code:
$w.onReady(function () {
initFAQrepeater();
});
function initFAQrepeater() {
$w(‘#repeater1’).forEachItem( ( $item, itemData, index ) => {
$item(‘#servicebutton1’).onClick(() => {
$item(‘#servicecontent1’).collapsed ? $item(‘#servicecontent1’).expand() : $item(‘#servicecontent1’).collapse();
});
});
}
Attached is my video demo:
Video Demo
Any help is greatly appreciated. Thank you!
