Hide all other elements when one is showing

Ask the community
,
1

Hi everyone!

First of all, I have to confess that I’m not a programmer and I’m not familiar with coding, therefore, I’m sure my question will probably be really easy for some of you to answer.

I’ve created my site and using some tutorials I found online, I managed to add collapsible elements, using the code shown here https://www.wix.com/corvid/example/collapse-elements . Now, I have a number of headerboxes each with its fold, which is collapsed and expands when you click on the respective headerbox. It all works perfectly, but what I’d like to do is, say, if I click on headerbox1, all the other headerboxes fade out (or hide altogether) and then when I click on headerbox1 to collapse its fold, all the other headboxes appear again.

I hope I made myself clear and somebody is able to help me.

Thanks in advance!

2

442×564 31.5 KB

Here’s a capture of the code I used. I’m sure there is a way of doing what I have in mind, but I just don’t have the knowledge to achieve it and I haven’t found any tutorial online or discussion here. I was thinking of having a function that hides all headboxed when a fold is showing. I have tried, but with no results. Is anyone able to give me a hand?

3

Greetings,

This accomplishes your aim. The code could have been put in a separate function, but there was no definite advantage in doing so.

function toggleFold(index) {
 let $fold = $w('#fold' + index);
 let $headerBox = $w('#headerBox' + index);
 let $arrowDown = $w('#arrowDown' + index);
 let $arrowRight = $w('#arrowRight' + index);
 // deal with collapsing/expanding for the other headerBoxes 
    [1,2,3,4]
        .filter(idx => idx !== index)
        .forEach(idx => {
         if ($fold.collapsed) {
                $w('#headerBox' + idx).collapse()
            } else {
                $w('#headerBox' + idx).expand()
            }
        })
 // toggle the fold at the index
 if ($fold.collapsed) {
        $fold.expand();
        $arrowDown.show();
        $arrowRight.hide();
        $headerBox.expand();    
    }
 else {
        $fold.collapse();
        $arrowDown.hide();
        $arrowRight.show();
        $headerBox.expand();    
    }

 // collapse the other folds
    [1,2,3,4]
        .filter(idx => idx !== index)
        .forEach(idx => {
            $w('#fold' + idx).collapse();
            $w('#arrowDown' + idx).hide();
            $w('#arrowRight' + idx).show();
        })
}
4

Thank you so much for your help! It works now. Have a nice day :slight_smile: