HIRE now
This tutorial will teach you:
- how to add Expand/Collapse effect
- how to Expand and Show elements
- how to set triggers
- what is the difference
- Bonus: how to use ‘event’ in your functions
This tutorial will be useful for people who want to learn how to use Wix Code — Corvid and make the first step, people who want to make their Wix Site dynamic or structure pages with a lot of information, developers who were looking for ways to add interactive elements. Let’s start!
How to add Expand/Collapse effect?
1. Turn on Developer Tools, Properties Panel and Hidden Elements.
2. Add elements to your page. It can be image, text, box, video, a group of elements, etc. Basically, anything with ID in Properties. Optional: change IDs of elements to something meaningful.
3. Define which event(button click, mouse hover image, etc.) will trigger collapse/hide/expand/show functions. My images will be collapsed on load and my button will trigger images expansion.
4. Add a function to the event in Properties of the element triggers changes. In my case, it is an onClick event in buttonShow’s properties.
5. Change the code in function. In my case:
export function buttonShow_click(event, $w) {$w(‘#imageWixLogo’).expand();}
NOTE: $w(‘#imageWixLogo’) — is an element selector by ID.
What is the difference between Collapse/Expand and Hide/Show?
When element is hidden it reserves the space and do not show the element. When element is hidden it is now shown and also does not take the space(no blank space when element is gone). What to use depends on your design and goals. Functions in Wix Code:
$w(‘#elementID’).hide();$w(‘#elementID’).show();$w(‘#elementID’).collapse();$w(‘#elementID’).expand();$w(‘#elementID’).collapsed; //return true or false$w(‘#elementID’).hidden; //return true or false
Bonus: how to use ‘event’ in your functions?
There is no need to add a separate function to every event, cause you can find out which event triggered the function. Let’s add Mouse Hover function. The Wix has two different events onMouseIn and onMouseOut. To handle them we can create one function and add the same name(of our function) to two or more events in properties.
My code will show ‘WIX’ when the user moves or “hovers” the mouse’s pointer over Wix Logo Image:
export function imageWixLogo_event(event, $w) {
console.log(event.type);
if(event.type===’mouseenter’){
$w(‘#imageWix’).show();
}
if(event.type===’mouseleave’){
$w(‘#imageWix’).hide();
}
}So event.type helps us to avoid code duplications.
RESULT
CODE
$w.onReady(() =>{
});export function buttonShow_click(event, $w) {
$w(‘#imageWixLogo’).expand();
}export function imageWixLogo_event(event, $w) {
console.log(event.type);
if(event.type===’mouseenter’){
$w(‘#imageWix’).show();
}
if(event.type===’mouseleave’){
$w(‘#imageWix’).hide();
}
}
Thanks for reading! Let me know if you have any questions ♥
I have an awesome team who will help you with any task in Wix.
- Have any questions? Request support via email: webstudioflip@gmail.com :)
- Get help with Velo Wix Code (formerly Corvid) on Fiverr
