top of page
Crumpled Fabric

1

Selectable Wix Buttons

Click URL to copy

May 15, 2023

1 min read

WIX Ideas Team

Tags: User Interaction Multi-state box Wix Buttons


In this tutorial, we will be adding selectable buttons in Wix using our own style. This style is entirely up to you, but in this video, we will be using check vector images to indicate the active buttons.


Download icons here


This is a code snippet written in Velo, a JavaScript-based platform for developing web applications using Wix.


The code uses the $w.onReady function to ensure that all the page components are loaded before executing the code.


The code also adds an onClick event listener to three buttons with IDs "exhibition1Button", "exhibition2Button", and "exhibition3Button". When any of these buttons are clicked, the code checks which button was clicked and sets the source of an image component ("#exhibition1Vector", "#exhibition2Vector", or "#exhibition3Vector") accordingly.


The code also calls a function called "changeState" on an element with the ID "statebox" and passes a string value ("exhibition1", "exhibition2", or "exhibition3") depending on which button was clicked.


Finally, the code assigns a value to an array called "buttonValue" depending on which button was clicked and logs the value of the first element in the array to the console.


Overall, it appears that this code is designed to change the appearance of vector images and update the state of the page when certain buttons are clicked.


Watch Tutorial

Code



Leave a comment (0)

Thanks for leaving a comment🎉

RELATED TUTORIALS 🚀

Print Any Page on Wix

Print Any Page on Wix

Allow your site visitors to click on an icon to print any page on your Wix or Wix Studio website

bottom of page