Collapsing and expanding

I have a form on my website which is collapsed when the page first loads. I have a few buttons which I have programmed to expand the form when clicked. And a button on the form which collapses the form when clicked. They seem to work. But when the form has been collapsed pressing the expand buttons no longer brings up the form. Do the buttons only work once?

No it should always work unless there’s a bug.
Maybe you should post your code here for review.

Why bother with a collapsing or expanding form, when you can just use a lightbox on that page.

However, if you have coded everything correctly, then there should be no reason why your separate buttons for collapsing or expanding the form will work.

I tried a lightbox but it said it wouldn’t show on the mobile site unless I had it constantly open on the desktop site which I don’t want

$w(‘#form1’).collapse()
$w(‘#form1’).expand()

@eslade79 Can you add your entire code?

Lightboxes are slower, especially if you want to pass data to them.

@eslade79 Constantly open on the desktop site?

You just need a button on your page that is linked to your lightbox so that the user can click on it to open the lightbox on either the desktop or mobile versions of your website. They can simply click on the ‘X’ or Close button in the lightbox to close it again.

However, as J.D. says above, keep with the form if you are passing data to them from the page.

@jonatandor35 I’m hoping that isn’t all the code :wink:

@eslade79 You would need to add an export function to your open and close buttons through the elements properties panel so that you would get the event handler function added to the page’s code tab.
https://support.wix.com/en/article/corvid-working-with-the-properties-panel
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events

Something like this in your code…

export function yourCloseButton_click(event) {
$w(‘#form1’).collapse();
}

export function yourOpenButton_click(event) {
$w(‘#form1’).expand();
}

For more info see the reference here.
CollapsedMixin - Velo API Reference - Wix.com

@givemeawhisky sorry will post the full thing tomorrow when back at my computer. This is all very new to me so
apologies for dumb questions!!

@givemeawhisky , if she copies and pastes using your apostrophes, she’ll get an error.

@jonatandor35 “She” :smirk::grin::grin:

@eslade79
No need for any apologies here, this forum is to be used for learning and we learn something new on here everyday.

Plus, yes you are correct J.D., I copied and pasted the code from above and didn’t correct it before I published the post, thanks for pointing that out :+1:

$w("#form1").expand(); // And here's the duplication forum error again...

@eslade79 corrected.
So maybe the issue is that you used the wrong quote signs. Check and see.

here is the full code:

$w.onReady( function () {
//TODO: write your page related code here…
});
export function button2_click(event) {
//Add your code for this event here:
$w(‘#form1’).expand()
}
export function button3_click(event) {
//Add your code for this event here:
$w(‘#form1’).expand()
}
export function button4_click(event) {
//Add your code for this event here:
$w(‘#form1’).expand()
}
export function button5_click(event) {
//Add your code for this event here:
$w(‘#form1’).expand()
}
export function button6_click(event) {
//Add your code for this event here:
$w(‘#form1’).expand()
}
export function button7_click(event) {
//Add your code for this event here:
$w(‘#form1’).collapse();
}

although it seems to be working now…

Yes. Your code looks fine and is expected to be working (although it’s better to add a semicolon ; after each .expand() like you did for the collapse() function).

@jonatandor35 Thanks will add that!