Element unable to toggle

Ask the community
,
1

I wrote the following toggle code to toggle my box “#boxA”, but it can only collapse on the first click of my button “#startA”. After which, subsequent clicks made no changes at all, it remains collapsed permanently. What could be wrong?

$w ( “#startA” ). onClick ( ( event ) => {
if ( $w ( “#boxA” ). expand ){
$w ( “#boxA” ). collapse ();
}
else {
$w ( “#boxA” ). expand ();
}
});

2

You want to check for collapsed , not for expand …

$w("#startA").onClick((event) => {
  if ($w("#boxA").collapsed) {
     $w("#boxA").expand();
  }
  else {
     $w("#boxA").collapse();
  }
});

See the collapse property of the CollapsedMixin API.

3

@yisrael-wix You mean the toggle can ONLY check for collapsed? It doesn’t work both ways?

4

@buzzzybeebee Well, if it’s not collapsed, then it’s expanded. The test is on a boolean. True means it’s collapsed, False means it’s expanded.

5

@yisrael-wix It sounds rather strange to me, cos I’m not a programmer, so it’s like saying it can only check for true and can’t check for false. Thanks anyway!

6

@buzzzybeebee You can actually check for true or false conditions. Here are a couple of examples:

First, let’s see if I’m thirsty:

if(thirsty === true) {
   have_a_beer();
}
else {
   have_some_beer_nuts();
}

This time, we’ll see if I’m not thirsty:

if(thirsty === false) {
   have_some_beer_nuts();
}
else {
   have_a_beer();
}

We could also see if I’m not thirsty in a slightly different way:

if(thirsty !== true) {
   have_some_beer_nuts();
}
else {
   have_a_beer();
}

In this case, we use the comparison operator !=== which means not equal to.

For more information, see this article on conditional branching.

You may not be a programmer yet, but I’m sure you will be.

I would suggest visiting the following sites for information on programming in Javascript:

To learn about programming with Velo, read the following articles that will help you start working with Velo:

  • About Velo by Wix - what Velo is and what features it has.

  • Getting Started with Velo by Wix - step-by-step tutorial on how to start using Velo.

  • Onboarding to Velo by Wix - introduction to Velo with short tutorials.

Feel free to visit the forum when you run into difficulties.