top of page
Collapsing Form

Collapsing Form

Collapse and expand sections of a form.

Intermediate.png

Beginner

5K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

This example demonstrates collapse and expand sections of a form.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

This example demonstrates how to integrate collapsable sections into your forms.

 

The form collapses and expands the Price section depending on whether the user checked or unchecked the Sort by Price checkbox.


The collapsing layout works by placing the elements of the section that can be collapsed in a box element. We use the onChange event of the checkbox to call the box element’s collapse and expand functions.


Next Steps


  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Velo.

APIs We Used

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Basic Form

Basic Form

Create a basic form without writing a line of code.

Intermediate.png

Beginner

Cascading Form

Cascading Form

Change the options of a dropdown based on a previous selection.

Intermediate.png

Intermediate

Multistage Form

Multistage Form

Create a form split into multiple steps.

Intermediate.png

Beginner

Anchor 2
bottom of page