Collapsing Form

Collapse and expand sections of a form.

Code Level

Beginner

Published

 

Example Description

This example demonstrates collapse and expand sections of a form.

Example Code

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 Corvid.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER