How to Make Collapsible Boxes within Collapsible Boxes?

Ask the community
,
1

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();
}