Collapsed Elements | WixCreate | Wix Code - Corvid
 

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

This is the title of the pink box

Websites designed by WixCreate that use the above Wix Code:

Official Wix Expert & Wix Agency Partner

© 2020 by WIXCreate.com

I  All Rights Reserved  I  info@wixcreate.com  I  202-640-5440

facebook-2.gif