Help Expand/Collapse box

Ask the community
,
1

Hello All! Guys I’ve never coded before, so my question may be stupid. I am trying to do an expandable button with more information. I did exactly as the example bellow but is not working. Someone can help me?

This one is the example that works:

563×760 107 KB

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

And this one is mine that I am trying to replicate:

948×395 12.3 KB

function toggleFold ( index ) {
let $fold = $w ( ‘#fold’ + index );
let $arrowDown = $w ( ‘#arrowDown’ + index );
let $arrowRight = $w ( ‘#arrowRight’ + index );

if ( $fold . copllapsed ){
$fold . expand ();
$arrowDown . show ();
$arrowRight . hide ();
}
else {
$fold . collapse ();
$arrowDown . hide ();
$arrowRight . hide ();
}

[ 1 , 2 , 3 ]
. filter ( idx => idx !== index )
. forEach ( idx => {
$w ( ‘#fold’ + idx ). collapse ();
$w ( ‘#arrowDown’ + idx ). hide ();
$w ( ‘#arrowRight’ + idx ). show ();
})
}
export function boxp1_onClick ( event ) {
toggleFold ( 1 );
}
export function boxp2_onClick ( event ) {
toggleFold ( 2 );
}
export function boxp3_onClick ( event ) {
toggleFold ( 3 );
}

What am I doing wrong? I already change the IDs, set to collapse/hidden the element that I should do. The code goes fine, any error, just does not work.

2

Please provide the link to the example, which you have seen.

3

Have you remembered to change the element property ID to:
fold1, fold2, etc…, arrowDown1, etc…, arrowRight1, etc… ?

+check on the property panel that the boxp’s are turned on.

  • the export functions look wrong. It should be:
    export function boxp1_click
    NOT onClick,