Wix Tutorial - Collapse Elements, using Wix Code

When a user clicks on one of the arrows, the elements on the page collapse and expand.


The collapsing layout works by placing text in box elements. The first box contains the title of the collapsing layout, the second box, which is collapsed contains the text that goes with the title.
 
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.

Elements:

  • Orange Title Box: #orangeTitleBox

  • Pink Title Box: #pinkTitleBox

  • Orange Description Box: #orangeDescrBox    |   Collapsed on load

  • Pink Description Box: #pinkDescrBox    |   Collapsed on load

  • Down-Pointing Arrow Orange: #arrowDownOrange    |   Hidden on load

  • Down-Pointing Arrow Pink: #arrowDownPink    |   Hidden on load

  • Right-Pointing Arrow Orange: #arrowRightOrange

  • Right-Pointing Arrow Pink: #arrowRightPink

 

A transparent box has been added below both the Orange Description Box and the Pink Description Box. Without these boxes, there would be no white space shown between the elements.

Wix Code:

export function arrowRightOrange_click(event) {
    $w("#orangeDescrBox").expand();
    $w("#arrowRightOrange").hide();
    $w("#arrowDownOrange").show();
}

export function arrowDownOrange_click(event) {
    $w("#orangeDescrBox").collapse();
    $w("#arrowRightOrange").show();
    $w("#arrowDownOrange").hide(); 
}

export function arrowRightPink_click(event) {
    $w("#pinkDescrBox").expand();
    $w("#arrowRightPink").hide();
    $w("#arrowDownPink").show(); 
}

export function arrowDownPink_click(event) {
    $w("#pinkDescrBox").collapse();
    $w("#arrowRightPink").show();
    $w("#arrowDownPink").hide(); 
}

Demo:

This is the title of the orange box

arrow
arrow

You can add text, images, galleries, or anything else in here

Pink Apple, Purple Background
Cotton Candy Ice Cream
Cotton Candy
Pink Banana

This is the title of the pink box

arrow
arrow down

You can add text, images, galleries, or anything else in here

Yellow Rose
Purple Pineapple
Orange Tones
Pink Apple
Wix Code Collapsed Elements