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

Ask the community
,
1

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?

1342×539 56.6 KB

2

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

$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()
    })
})
3

Thanks Bruno, I’ll try this out!

4

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.

5

@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.

6

@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

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

7

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