Anchor 1

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();
}