top of page
Collapse Elements

Collapse Elements

Collapse and expand groups of elements.

Intermediate.png

Beginner

69K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

This examples demonstrates collapse and expand of groups of elements.

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

APIs We Used

Non-code example.

Non-code example.

Related Articles

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!

Hide & Show Elements

Hide & Show Elements

Hide and show elements in response to user interactions.

Intermediate.png

Intermediate

Hide and Show an Image

Hide and Show an Image

Show and hide an image according to the clicked button.

Intermediate.png

Beginner

Sticky Header

Sticky Header

Keep the site header visible when a visitor scrolls the page.

Intermediate.png

Beginner

Change Layout

Change Layout

Change a layout using a slideshow.

Intermediate.png

Beginner

Anchor 2
bottom of page