The Show Link Type gives you full control over visibility and interactivity in Divi. With just one menu item, creatingyou can toggles, tooltips, submenus, reveal effects, and more.
Available In
DiviMenus module
DiviMenus Flex module
Overview
The Show Link Type lets you control the visibility of any element on the page by clicking or hovering a Menu Item. This opens up powerful possibilities like:
Toggle content visibility
Create filters or accordions
Reveal hidden steps in a process
Trigger custom UI interactions
You can bind any Menu Item to one or more elements by their CSS ID or CSS class.
When using the DiviMenus module, this Link Type also applies when clicking or hovering on clickable Menu Item titles. This occurs when using the DiviMenus module.
How to Use
Open the Menu Item settings.
Select Show from the Link Type dropdown.
Go to the Link toggle and configure the following fields.
Content → Link Fields
Element CSS ID: Enter the ID(s) of the page elements you want to show/hide. Separate multiple IDs with commas. Example: pricing-row,features-grid.
Note:
IDs are case-sensitive, must contain at least one character, cannot start with a number, and must not include spaces.
Element CSS Class: Enter the class name(s) of the elements you want to control. You can bind multiple classes using commas. Example: .product-details,.pricing-plan.
Show On Hover
Enable this to trigger the visibility on hover in addition to click. If enabled, a new field called Hide On Mouse Leave will appear.Hide On Mouse Leave: If enabled, the targeted element will hide again when the user moves the mouse away from the Menu Item.
Toggle Visibility:
Enabled: Toggle visibility back and forth (like an accordion).
Disabled: Always shows the element, even if it’s already visible.
Keep Visible: When enabled, the shown element remains visible even after clicking other Menu Items. Useful for multi-step flows or persistent UI elements.
Hide On Menu Button Click: Enable this to hide the element when the Menu Button (that toggles the full menu) is closed. The default is set to Yes.
Hide On Page Click: Enable this to hide the shown element when clicking anywhere else on the page. The default is set to No.
Initial State: Set whether the element should be hidden (default) or visible on page load.
Open URL: This field appears when Show On Hover is enabled. It allows you to open a URL when clicked and show an element when hovered over.
Note: This feature is not supported on touch devices (phones, tablets).
Enable Active State: If enabled, the Menu Item becomes active when the page URL matches the target URL. Useful for creating anchor-based navigation with automatic highlighting.
Design → Link
Enter Effect: Apply an entrance animation to the target element. Choose from effects like Fade, Slide, Zoom, etc.
Exit Effect: Apply an exit animation when the element hides. Custom effects include transitions with duration and intensity settings.
Learn more about: DiviMenus Custom Effects.
Visual Builder & Theme Builder Behavior
In the Visual Builder, hidden elements appear with 0.5 opacity so you can still interact with them.
In Theme Builder templates (Header, Footer, Body), hidden elements are fully hidden while editing to avoid visual distractions.
Use Wireframe View to locate and edit these elements easily.
Examples & Resources
Explore live layouts that use Show Link Type: