# How can I make a toggle fold function within a toggled box?

**URL:** <https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [August 21, 2021, 8:30pm UTC](https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901 "2021-08-21T20:30:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bdensley](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@bdensley](https://forum.wixstudio.com/u/bdensley)\
**Post date:** [August 21, 2021, 8:30pm UTC](https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901/1 "2021-08-21T20:30:48Z")

</div>

Hi Everyone,  
I would like to build collapsing menu within an already collapsing menu. I currently have a toggle fold function for my main categories, but within each fold I would like to include another collapsing toggle fold list. See my image below. I have the first header labeled General Course Planning, which works great along with the next headers in my main list. However, when fold1 opens, I would like to have a second set of headers/folds, see label 2. How can I do this without having the original fold collapse when I click on second header? Is there a way to create a new isolated index within fold 1 for example?

 ![](https://us1.discourse-cdn.com/wix/original/3X/9/a/9a43f5d932fc6ebe83159c9429c70ce44433b7c6.png)

---

<div class="post-metadata">

**Author:** ![bwprado](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/bwprado/32/7220_2.png) [@bwprado](https://forum.wixstudio.com/u/bwprado)\
**Post date:** [August 22, 2021, 12:22am UTC](https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901/2 "2021-08-22T00:22:36Z")

</div>

Yeah, you can do that, the _**.collapse()**_ method only applies to the element you want.

```javascript
$w.onReady(() => {
    $w("#button1").onClick(() => {
        $w("#box2").collapsed
            ? $w("#box2").expand()
            : $w("#box2").collapse()
    })
    $w("#buttonBigBox").onClick(() => {
        $w("#box1").collapsed
            ? $w("#box1").expand()
            : $w("#box1").collapse()
    })
})

```

---

<div class="post-metadata">

**Author:** ![bdensley](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@bdensley](https://forum.wixstudio.com/u/bdensley)\
**Post date:** [August 22, 2021, 6:10pm UTC](https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901/3 "2021-08-22T18:10:31Z")

</div>

Thanks Bruno, I’ll try this out!

---

<div class="post-metadata">

**Author:** ![bdensley](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@bdensley](https://forum.wixstudio.com/u/bdensley)\
**Post date:** [August 22, 2021, 7:02pm UTC](https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901/4 "2021-08-22T19:02:27Z")

</div>

Bruno or anyone else, how can I make it so that the box will collapse once I click on the next header box? Also, I have added arrow functions where I click and the arrow changes, how can I revert to the original arrow? Here’s what I have:  
$w . onReady (() =\> {  
$w ( “#genbox1” ). onClick (() =\> {  
$w ( “#genfold1” ). collapsed  
? $w ( “#genfold1” ). expand ()  
: $w ( “#genfold1” ). collapse ()  
$w ( “#AR1” ). hide ();  
$w ( “#AD1” ). show ();

where genbox1 is the header, genfold1 if the collapsed box, AR1 is a right arrow and AD1 is a down arrow.

---

<div class="post-metadata">

**Author:** ![bwprado](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/bwprado/32/7220_2.png) [@bwprado](https://forum.wixstudio.com/u/bwprado)\
**Post date:** [August 23, 2021, 5:43am UTC](https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901/5 "2021-08-23T05:43:59Z")

</div>

@bdensley without knowing the elements you have and all the code you have I cannot help you more than I did.

Tell me what elements you have in your page and what you want them to do, please.

---

<div class="post-metadata">

**Author:** ![bdensley](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@bdensley](https://forum.wixstudio.com/u/bdensley)\
**Post date:** [August 23, 2021, 12:56pm UTC](https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901/6 "2021-08-23T12:56:15Z")

</div>

@bwprado working from the image above, I have the box labeled “second header” followed by a collapsed container box for text. Within the “second header” I have two arrows, one facing right and one facing down overlaying each other. Below the “second header” and collapsed box I have a “third header” and its collapsed container box, along with its own set of arrows. I would like to be able to click on each header and have the collapsed box expand (you’ve already helped with this part, thank you!). On the click, I would like for the right arrow attached to the header to hide, revealing the down arrow. With my current code this works. However, when I click the header again to collapse the text box, the down arrow remains. I would like to down arrow to hide again and reveal the right-facing arrow when the text box collapses.

Here’s an example of the arrow functionality I’m looking for: [https://www.wix.com/code-examples/v2-collapsing](https://www.wix.com/code-examples/v2-collapsing)

Second, I would like to build the function of when I click “third header”, the second header’s text box collapses, essentially I want to build some kind of “else” function or similar where if I click away the expanded boxes collapse.

I really appreciate any help!

Thank you,  
Blake

---

<div class="post-metadata">

**Author:** ![bdensley](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@bdensley](https://forum.wixstudio.com/u/bdensley)\
**Post date:** [August 25, 2021, 8:48pm UTC](https://forum.wixstudio.com/t/how-can-i-make-a-toggle-fold-function-within-a-toggled-box/32901/7 "2021-08-25T20:48:03Z")

</div>

Hi everyone, I was able to fix it on my own! I simply built two sets of togglefolding functions like shown in the tutorial. I didn’t realize (I am VERY new to velo language) that following the initial function command that togglefold was simply the title for the function. So, I created a second function labeled togglefold2. I’ve pasted my code. Pretty nifty, I now have a collapsing menu within my collapsing menu which resizes and collapses elements no longer in use.

**function** toggleFold ( index ) {  
**let** $fold = $w ( ‘#fold’ + index );  
**let** $arrowDown = $w ( ‘#arrowDown’ + index );  
**let** $arrowRight = $w ( ‘#arrowRight’ + index );  
// toggle the fold at the index  
**if** ( $fold . collapsed ) {  
$fold . expand ();  
$arrowDown . show ();  
$arrowRight . hide ();  
}  
**else** {  
$fold . collapse ();  
$arrowDown . hide ();  
$arrowRight . show ();  
}  
// 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 ();  
})  
}  
export function headerBox1\_onClick ( event ) {  
toggleFold ( 1 );  
}  
export function headerBox2\_onClick ( event ) {  
toggleFold ( 2 );  
}  
export function headerBox3\_onClick ( event ) {  
toggleFold ( 3 );  
}  
export function headerBox4\_onClick ( event ) {  
toggleFold ( 4 );  
}

**function** toggleFold2 ( index ) {  
**let** $genfold = $w ( ‘#genfold’ + index );  
**let** $AD = $w ( ‘#AD’ + index );  
**let** $AR = $w ( ‘#AR’ + index );  
// toggle the fold at the index  
**if** ( $genfold . collapsed ) {  
$genfold . expand ();  
$AD . show ();  
$AR . hide ();  
}  
**else** {  
$genfold . collapse ();  
$AD . hide ();  
$AR . show ();  
}  
// collapse the other folds/  
[1 , 2 , 3 , 4]  
. filter ( idx =\> idx !== index )  
. forEach ( idx =\> {  
$w ( ‘#genfold’ + idx ). collapse ();  
$w ( ‘#AD’ + idx ). hide ();  
$w ( ‘#AR’ + idx ). show ();  
})  
}  
export function genbox1\_click ( event ) {  
toggleFold2 ( 1 );  
}  
export function genbox2\_click ( event ) {  
toggleFold2 ( 2 );  
}  
export function genbox3\_click ( event ) {  
toggleFold2 ( 3 );  
}  
export function genbox4\_click ( event ) {  
toggleFold2 ( 4 );  
}