Button to Expand Box | WixCreate | Wix Code - Corvid
 

Wix Tutorial - Button to Open a Strip, using Wix Code

When a user clicks on a button, a box expands. When the user moves the mouse outside of the box, then the box collapses. This can be useful when coding a mega menu. The same can be done with strips.

Elements:

  • Blue Button: #button1

  • Orange Button: #button2

  • Blue Box: #menubox1  |  Collapsed on load

  • Orange Box: #menubox2  |  Collapsed on load

Wix Code:

export function button1_click(event) {
    $w("#menubox1").expand();
    $w("#menubox2").collapse();
}

export function button2_click(event) {
    $w("#menubox2").expand();
    $w("#menubox1").collapse();
}

export function menubox1_mouseOut(event) {
    $w("#menubox1").collapse();
}

export function menubox2_mouseOut(event) {
    $w("#menubox2").collapse();
}

Demo:

Click on the buttons below to expand the boxes that are currently collapsed.

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