⚠️ Upcoming Change: Addons will be discontinued in the near future, and we strongly encourage transitioning to Interactions to stay ahead of this change. An official announcement, including the deprecation schedule, will be shared well in advance to ensure a smooth transition.
Interactions provide a more robust, flexible, and future-ready solution for creating dynamic content. Learn more about Interactions.
The Show/Hide Widgets addon is one of the interactive components in Vev. You can easily apply it to any element to make your pages more engaging for your viewers. It is also a very versatile tool; you can use it to create pop-ups, menus, and much more. You can find some examples of interesting ways you can use this addon below.
Adding a Show/Hide Widgets addon
From the Top menu
Select the target element
Click on the Interactions icon (⚡️) at the top
Search for Show/Hide Widgets in right-side panel
Click on Add
The settings panel will automatically open and a flashlight icon 🔦 will also appear on the element in the layers panel; this indicates that the addon has been applied.
From the Interactions Panel
Select the target element
At the top-right corner of the right-side panel click on Interactions
Search for Show/Hide Widgets in right-side panel
Click on Add
To open the settings panel once it's been closed you can click on the flashlight icon 🔦 either from the Top menu, or next to the target element in the layers panel.
Pro Tip: Explore our Interactions feature for enhanced flexibility in showing and hiding elements! From clicks to scrolls and hovers, interactions may greatly improve the overall user experience and boost reader involvement. 🔥
Configuration options
Parameter | Description |
Show by default | Toggle on to show the applied element by default when the website loads, be sure to leave the visibility on in the layers panel. |
Triggers to set visible | Choose the elements that will make the target element visible when clicked. |
Triggers to set hidden | Choose the elements that will hide the target element when clicked. |
Enter Animation | Choose an entry animation for the applied element from a list of options to add some fluidity to the transition. |
LeaveAnimation | Choose an exit animation for the applied element from a list of options to add some fluidity to the transition. |
Note: Make sure to give a unique name to your triggers in the layers panel, otherwise, they won't appear in the dropdown list.
Sample Use Cases
Here are some examples of ways you can use the Show/Hide addon in your designs.
Pop-up
Switching Tabs
Menu
Limitations
The Show/Hide Widgets addon only works on click, it cannot be triggered by other events such as Load, Hover, or Scroll. We recommend using the Animation addon if that's what you are looking for.
Adding any animation to the triggers may cause them to malfunction. Instead, we suggest wrapping the element in a frame, keeping the animation attached to the element. Then, use the parent frame as the trigger instead. This will ensure that your element animates while the trigger continues to function properly.
Link Buttons cannot be used as triggers even if they are empty. This will result in a page reload every time you click on the button. Use a hand-crafted button instead.
It cannot be used in conjunction with an Element Link to reveal the target element and quickly take your users to its location on the page with one click.
The triggers cannot differ between breakpoints, meaning that if any trigger is added, or removed in a non-main breakpoint it will also impact the others.
When videos and audio are hidden, they cannot be paused. Users must manually pause them before closing the modal, otherwise the sound will continue playing in the background. We would recommend using interactions instead to do this.
Troubleshooting
If the triggers are unresponsive, please ensure that each one has a distinct name in the layers panel. Having triggers with identical names will result in failure.