In my product description page, I am trying to make a series of expandable/collapsible boxes that in turn expand/collapse into other boxes.
There are three "parent" boxes in which each has four "children" boxes. I would like to also expand each "children" box to expand into individual "grandchildren" boxes which in turn will contain the full descriptions.
For example:
Parent Box A (expand/collapse on click)
if expanded, show:
Child Box A
Child Box B
Child Box C
Child Box D if any child box is expanded, show:
Grandchild Box A
I have managed to create a repeated with expandable/collapsible boxes - however I am struggling in embedding this into another expandable/collapsible box. In the current iteration I have built, opening any box at the same level automatically collapses the other opened box at that level.
I have scoured the internet and have found no discussion on how to make this - but it must be possible. I desperately would appreciate any insight or help you could offer!
I have embedded the existing code I have below. You'll note that I also tried to make the arrow change color when rotated, but for some reason it wouldn't work. I then tried to make the arrow disappear and another one with the new correct color appear, this also didn't work. The arrow isn't a big concern, just a side consideration.
Existing Code
import wixAnimations from 'wix-animations'; const activeTextColor = '#000000'; const defaultTextColor = '#FFFFFF'; const activeBackColor = '#FFED00'; const defaultBackColor = '#009FE3'; $w.onReady(function () { initDropDown1(); }) function initDropDown1() { $w('#Repeater1').forEachItem(($item, $itemData, index) => { $item('#Button1').onClick(() => { openRelevantContent(index); }); }); } function openRelevantContent(targetIndex) { $w('#Repeater1').forEachItem(($item, $itemData, index) => { const contentBox = $item('#Box1'); const button = $item('#Button1'); const arrow = $item('#DownArrow1'); if (targetIndex === index) { contentBox.collapsed ? expandDropDown1Content(contentBox, button, arrow) : collapseDropDown1Content(contentBox, button, arrow); } else { collapseDropDown1Content(contentBox, button, arrow); } }) } function expandDropDown1Content(contentBox, button, arrow) { contentBox.expand(); button.style.color = activeTextColor; button.style.backgroundColor = activeBackColor; wixAnimations.timeline() .add(arrow,{rotate: 180, duration: 300}) .play(); // $w('#DownArrow1').hide(); // $w('#UpArrow1').show(); } function collapseDropDown1Content(contentBox, button, arrow) { contentBox.collapse(); button.style.color = defaultTextColor; button.style.backgroundColor = defaultBackColor; wixAnimations.timeline() .add(arrow,{rotate: 0, duration: 300}) .play(); // $w('#UpArrow1').hide(); // $w('#DownArrow1').show(); }
@imagestax , you might want to post this on the Velo forum: https://www.wix.com/velo/forum/coding-with-velo where it will be seen by more people with coding expertise.