How to make a single button expand and then collapse an element with single click?

Ask the community
,
1

Hi,

I have managed to source code to successfully expand an element (in my case a strip) with a click of a button, but i cannot manage to make that same button collapse the element with just another single click.

Any general code for this?

Thank you.

1 Like
2

You can simply have the button that you already have to expand the strip and then you can have another button in the strip itself to collapse the strip again.

You can use the same button, you would just need to check that when they click on the button that if the strip is collapsed it expands or else if it is expanded that it is collapsed.

https://www.wix.com/corvid/reference/$w.CollapsedMixin.html
Toggle an element’s collapsed state

if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}
3

Thank you! It worked lovely.

May i ask if you know the code to change a buttons text if element is collapsed or expanded?..

4

Just change the buttons label when you do the code as well.
https://www.wix.com/corvid/reference/$w.Button.html#label

See here for more info.
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events#deleting-an-event-handler-from-an-element

For example, let’s assume you have a button named takeTourButton on your site and that you added an onMouseIn event handler to it named takeTourButton_onMouseIn. You then add code to your function so that the button label changes from the default “Take the Tour” to “Let’s Go!” when the user hovers on it. Your code would look something like this:

export function takeTourButton_onMouseIn(event) {
    $w("#takeTourButton").label = "Let's Go!";
}
5

Ok i’ve tried the following but it doesn’t seam to work.


export function ButtonLiveData_click(event) {
 if( $w("#LiveDataStrip").collapsed ) {
     $w("#LiveDataStrip").expand();
    }
 else {
      $w("#LiveDataStrip").collapse();
    }
 if $w("#LiveDataStrip").expand() = true; {
  $w("#ButtonLiveData").label = "Hide Live Wave Data";
 
}

Any tips?

6

FIGURED OUT

For anyone with a similar issue here is the code that works for me.

  1. expand and collapse with a single click of a single button.

  2. changes the buttons text or “Label” depending on expanded/collapsed state.

export function ButtonLiveData_click(event) {
 if( $w("#Strip1").collapsed ) {
     $w("#Strip1").expand();
     $w("#Button1").label = "Show Less";
    }
 else {
      $w("#Strip1").collapse();
      $w("#Button1").label = "Show More";
    }
}
7

Please this code is still not working for me. Apparently when I put the “if” syntax, the last parenthesis is indicated as error and when I run it, the elements are just collapsed, and clicking the switch doesn’t change anything

8

Here’s a screenshot

1748Ă—1240 214 KB