Collapse Elements

Interactions

Collapse and expand groups of elements.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

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

 

The elements on the page collapse and expand menu sections when a user clicks on one of the arrows.

The collapsing layout works by placing the elements of each menu item in a box element. Each section that can be collapsed is also placed in a box element.

 

When a box is expanded, the boxes below it shift down the page to make room for it. When it is collapsed, the elements below it shift back up to take its space. Note that expanding or collapsing a box affects all the elements inside the box, so we don’t have to expand or collapse each one individually.

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.

Example Code

arrow&v

Example Demonstrates

Collapse & Expand

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode