Website Building » Wix » How Do I Create a Collapsible Section in Wix?

How Do I Create a Collapsible Section in Wix?

Last updated on December 16, 2022 @ 9:22 am

There are a few different ways that you can create a collapsible section in Wix. One way is to use the Wix editor to create a section that can be collapsed and expanded. Another way is to use HTML to create a section that can be collapsed and expanded.

To use the Wix editor to create a collapsible section, first create a new page or post. Then, click on the “Add” button and select “Section.”Add section in your Wix site

GREAT NEWS:

Exciting update! We've collaborated with Wix to offer WBI users with a free plan for all website creation needs - Explore the details here.

In the “Section” settings, select “Collapse” from the “Layout” dropdown menu. You can then add content to the section and style it however you like.

Click more actions to layout the section Wix Select layout from the menu Wix

To use HTML to create a collapsible section, first create a new page or post. Then make sure to enable the Developer Mode.Enable developer mode Wix

Next, add a Multi-state Box element in the section. Then click “Manage States” and edit.

Add Multi-state box to section Wix Manage states for multi-state box in Wix

Start filling the section with details you want to add to the collapsible. Add the “Title of Collapsible Section” to the first ID “Collapse” and the content of the collapsible section goes to the second ID “Expanded.”

Create collapse & expanded state Wix

From here we can start adding the code to program the section to collapsible. Click the “Home” icon at the bottom of the Wix editor.

Then, add the following code to the page:

Use Javascript & Velo to program collapsible section on wix

PRO TIP: This article provides instructions on how to create a collapsible section in Wix but does not mention the potential risks associated with doing so. Collapsible sections can be used to hide content on a page, which may be misleading or confusing to visitors. If not used carefully, collapsible sections can make a page appear cluttered and difficult to navigate.

You can then style the section however you like using CSS.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.