Add fade effect on element expand/collapse

Ask the community
,
4

@sebastienroten
You are coding a lot for a little function.

Maybe you first test this one, and try to understand it…

let myBoxIDs=[]; 
    myBoxIDs[0] = "#box1";
    myBoxIDs[1] = "#box2";
    myBoxIDs[2] = "#box3";
  //myBoxIDs[3] = "#box4"; <-- activate more boxes here

$w.onReady(function () {
    $w("#button01").onClick(async()=> {close_allBoxes(); open_Box(0);});
    $w("#button02").onClick(async()=> {close_allBoxes(); open_Box(1);});
    $w("#button03").onClick(async()=> {close_allBoxes(); open_Box(2);});
});


function close_allBoxes() {
    for (let i = 0; i < myBoxIDs.length; i++) {
       $w("#box"+i).hide();
       $w("#box"+i).collapse();        
    }
}

function open_Box(ID) {$w("#box"+ID).expand();  $w("#box"+ID).show();}

What is different to your code?

  • this one first closes all boxes and immediately opens just the one you want have to be opened on the according button-click.
    -This one is more flexible → because you can easely add more buttons to work the same way, or you maybe want to delete some buttons.
    -this code is more compact.

After you got it to work, do the next step and add the ASYNC-AWAIT-function.
If it still do not work, you could maybe use → “setTimeout(()=>{},delayTimeHere);”
for your purposes as workaround.

Try it out and expand your coding horizons!

GOOD-LUCK!