Hide/Show sections with autoclosing

Hi everybody,

I wish to create a page with 3 sections (it’s not a repeater), where sections appear only when you click on the respective button (= #button1 for #section1, #button2 for #section2, …)

And when we click on another button, the previous section disappears (= there would be always and only one section visible)

Perhaps a photo can help you understand my final goal… :

I really don’t know what kind of code to use! I am a novice !

For the moment, I’m only at this point :disappointed_relieved: (regarding the 1st button/section effect) :
$w . onReady ( function () {
$w ( “#button1” ). onClick (() => {
if ( $w ( “#section1” ). collapsed ) {
$w ( #section1 ). expand ();
} else {
$w ( #section1 ). collapse ();
}
});
});

If someone can help me, it would be really nice
Seb

The logic for each button is this: If the corresponding section is collapsed, expand it and collapse all the other sections; otherwise collapse it (and do nothing else).

Note that this can leave you with a situation where NO sections are expanded. If that’s not what you want (that is, if you always want at least one section expanded), you’d want to change the code so that clicking the button for an already-expanded section would do nothing at all.

I started with your code and added the additional logic.

I’m a novice Velo coder myself, so someone else may want to confirm that this is technically correct. But I did test it, and it worked. Incidentally, I’m showing only the functional code. You might want to add some console.log statements for debugging purposes.

$w.onReady(function () {
  $w("#button1").onClick((Event) => {
    if ($w("#section1").collapsed) {
      $w("#section1").expand();
      $w("#section2").collapse();
      $w("#section3").collapse();
    } else {
      $w("#section1").collapse();
    }
  });

   $w("#button2").onClick((Event) => {
    if ($w("#section2").collapsed) {
      $w("#section2").expand();
      $w("#section1").collapse();
      $w("#section3").collapse();
    } else {
      $w("#section2").collapse();
    }
  });

   $w("#button3").onClick((Event) => {
    if ($w("#section3").collapsed) {
      $w("#section3").expand();
      $w("#section2").collapse();
      $w("#section1").collapse();
    } else {
      $w("#section3").collapse();
    }
  });
});

btw, here’s a link to the page where I tested this code:

https://laborstreet.editorx.io/xpractice/sectioncollapse

@sebastienroten
Why not first take a look onto already given examples in the EXAMPLE-SECTION of this FORUM ?

@Jim Feuerstein
Quick-Tip:

$w("#section2").collapse();
$w("#section1").collapse();

Sim-Sala-Bim - → 2 in 1 …

$w("#section1, #section2").collapse();
2 Likes

Oh perfect. It works very well. Thanks a lot.

And you are indeed right, you should “prevent” another click on the already activated button!
I have for the moment worked around this problem while waiting to know the script for that, by adding in each of my 3 sections a container (-100px in my case) with a text-title in a identical grid to my 3 buttons which comes to be placed exactly above the button of the section to prevent that one can click again on the activated button/section … ( I am going to take a tour on EXAMPLE-SECTION to learn more )

Many thanks again
Seb

@russian-dima
I really suck! I didn’t see that there was an " Example Section " in this forum… !
I find it now.
Tks a lot, I am going to take a tour.
Many thanks again for your time and your help.
Seb

1 Like

Here’s a Collapsible Sections example that might help you.

@yisrael-wix
Tks a lot for your help
Seb

@sebastienroten You’re over-complicating. Preventing the collapse when a button is clicked for the second time is very simple. Read my first post again, where I tell you how to do that: “you’d want to change the code so that clicking the button for an already-expanded section would do nothing at all.”

The code I gave you uses an if / else structure. The if portion acts if the section is collapsed (it opens it). The else portion acts if the section is already expanded (it collapses it). You don’t want that ‘else’ portion to do anything. So you just get rid of it. To make that clear, I’ve simply commented it out below – you’ll want to delete it.

Note, however, that, if you want one section always open, you may want to set your initial state, so that one is open in the first place. I adjusted my test page to this new behavior.

$w.onReady(function () {
  $w("#button1").onClick((Event) => {
    if ($w("#section1").collapsed) {
      $w("#section1").expand();
      $w("#section2").collapse();
      $w("#section3").collapse();
    // } else {
    //   $w("#section1").collapse();
    }
  });

   $w("#button2").onClick((Event) => {
    if ($w("#section2").collapsed) {
      $w("#section2").expand();
      $w("#section1").collapse();
      $w("#section3").collapse();
    // } else {
    //   $w("#section2").collapse();
    }
  });

   $w("#button3").onClick((Event) => {
    if ($w("#section3").collapsed) {
      $w("#section3").expand();
      $w("#section2").collapse();
      $w("#section1").collapse();
    // } else {
    //   $w("#section3").collapse();
    }
  });
});


ah yes, I understood (finally!) :grinning:. Many tks
I delete the “else” part and work perfecty.
Thanks again for your help
Seb

1 Like