Is there an easy way to make this design with expandable boxes?

Ask the community
1

I have seen that Editor X doesn’t have a feature to create collapsable boxed. Maybe someone knows a way to make it? I would really appreciate it. Cheers x

1470×1045 211 KB

2

Hi @margaritaslvy I do know a way to make it! :smiley:

…tho it involves c0d3 and has its limitations and disadvantages; for example:

  • You cannot animate the collapse/expand function as for now

  • Item properties (sometimes or oftentimes) fail to get saved between sessions; which’ll mean they’ll work just fine in your published site but might get lost when you close your editor’s tab in the browser

You can achieve this using the Corvid (which has been just renamed to ’ Velo ’ ).
Here’s a basic exercise on how to expand/collapse ellements, you can click on ‘Edit now’ to enter the template and sneak a peek to the code so you can understand it a bit deeper (DevMode will be already on); and a live example of this same exercise to see it live.
*EDIT: the example won’t work bcs they’ve changed all of their architecture and interface and has probably something to do with the rebrand (“corvid” > “velo”) too, but trust me as far as I know expandable content is possible I tried it myself

The elements involved in this kind of function are these:

  • A trigger : the independent item that starts the function on click or hover

  • A container : the dependent item that will collapse/expand along with its content

  • The content : the dependent elements inside (attached to) the container

Basically the function consists in this: you click on the trigger and your container expands (showing your content) or collapses (hiding your content). Your trigger can be a button, an image or a shape, anything that can be clicked on; your container can be a strip, a container box, an interactive box or even a slideshow, and your content is all your images n’ text that you want to fit in that drawer, basically anything you can (and want to) put in your container.

The basic steps are as follows:

  1. Turn on DevMode on the Editor (available in both Classic Wix & EditorX).

  2. Add a button (your trigger) to your site, on a page or the header/footer and change its ID in the Properties box, for example (let’s say) “triggerButton”.

  3. Add an onClick() event handler in the same Properties box; that’ll be the name of the function which you’ll call later in the Corvid (now “Velo”) to collapse or expand. By default, the name is set automatically to “triggerButton_click”.

  4. Add your container and fill it with your desired content. Then make sure to select the container and change it’s ID as well, for example “myContainer”

  5. Define your function as follows; you’ll have to write the code under the onReady() function. Make sure it is in the corresponding page where your button and container belong, or in the main site’s code (masterPage.js) if it’s in the header, footer, or showing in all the pages.

export function triggerButton_click(event) {
    if( $w("#myContainer").collapsed ) {
        $w("#myContainer").expand();
    }
    else {
        $w("#myContainer").collapse();
    }

This function, once exported, verifies first the expansion status of the container (if it is already either collapsed or expanded) and then applies the opposite action to that state through a conditional: it’ll collapse if it’s expanded, and it’ll expand if it’s collapsed. Hence, and according to this documentation, it’s state will toggle unequivocally each time you click on the trigger.

NOTE: Collapse and expansion are not the same as Show/hide, so no need to hide anything on the layers pannel nor to intervene in the function.

Hope it helps :slight_smile: