Coding with WIX: Collapsible boxes

Collapsible boxes are a great way to save space on your website and make it more visually appealing. Luckily, creating collapsible boxes on a WIX website is easy with Velo. This tutorial will show you how to create collapsible boxes on your WIX site using Velo.

Step 1: Add a Repeater to Your Page

The first step to creating collapsible boxes is to add a repeater to your page. A repeater is a WIX element that allows you to display a collection of items in a specific layout. To add a repeater to your page, follow these steps:

1. Click on the “Add” button in the left-hand menu.

2. Click on “Repeater” and choose the layout you want to use.

Step 2: Add a Box Element to Your Repeater

Once you’ve added the repeater to your page, you need to add a box element. The box element is what will be collapsible. To add a box element to your repeater, follow these steps:

1. Click on the repeater on your page to select it.

2. Click on the “Add” button in the left-hand menu.

3. Click on “Box” and choose the layout you want to use.

Step 3: Add a Button Element to Your Box Element

Now that you’ve added a box element to your repeater, you need to add a button element. The button element will be used to trigger the collapse and expansion of the box element. To add a button element to your box element, follow these steps:

1. Click on the box element in your repeater to select it.

2. Click on the “Add” button in the left-hand menu.

3. Click on “Button” and choose the layout you want to use.

Step 4: Add the Velo Code

The final step to creating collapsible boxes is to add the Velo code. Velo is a WIX platform that allows you to add custom code to your website. To add the Velo code, follow these steps:

1. Click on the “Code” button in the left-hand menu.

2. Click on “Add” and choose “Server Function”.

3. Name your function and add the following code:

export function collapseBox($w, event) {
    let item = $w.at(event.context);
    if (item("#box").collapsed) {
        item("#box").expand();
    } else {
        item("#box").collapse();
    }
}

1. Click on “Add” and choose “Page Event”.

2. Choose “$w.onReady” from the dropdown menu.

3. Add the following code:

$w.onReady(function () {
    $w("#repeater").onItemReady(($w, itemData, index) => {
        $w("#button").onClick((event) => {
            collapseBox($w, event);
        });
    });
});

Step 5: Preview and Test

Now that you’ve added the Velo code, it’s time to preview and test your collapsible boxes. Click on the “Preview” button in the top right-hand corner of the editor to see how your collapsible boxes look. You should be able to click on the button to collapse and expand the box.

Conclusion

Creating collapsible boxes on your WIX website is easy with Velo. Following the steps outlined in this tutorial, you can create collapsible boxes that will save space on your website and make it more visually appealing.