How to collapse or hide element on event(click, mouse hover, element change) using Wix Code
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 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 ♥
