Show Link Type

Available in:

Overview

This Link Type allows you to control the page elements visibility when clicking or hovering the item where this Link Type has been set (e.g. Menu items in DiviMenus).

This opens up a lot of possibilities related to visibility!

For example, you can create buttons to show and hide elements, content toggles and visibility filters.

Basically, you can design the elements of your page and decide which ones to show or hide when clicking or hovering the item where the Show Link Type has been set.

Note: If you are using the DiviMenus module, the Show Link Type will also be triggered when clicking or hovering clickables Menu Item Titles.

How to show page elements

Even though using this Link Type is pretty straightforward, we are going to guide you through all the steps so you can see how this Link Type works.

First, you have to select the Show option from the Link Type dropdown.

If you are using either the DiviMenus or the DiviMenus Flex module you must enter the Menu Item you want it to show an element (or elements) and open the Link module toggle.

Once you have selected the Show Link type option for an item, you can set the Show behavior by using the following module fields:

Element CSS ID

Type here the CSS ID of the element you want to associate with this item. You can bind any element of the current page to the Menu Item. You can also bind multiple elements by typing their CSS IDs separated by commas.

Note: The ID name is case sensitive, must contain at least one character, cannot start with a number and must not contain whitespaces (spaces, tabs, etc.).

Element CSS Class

Type here the CSS Class of the element (or elements) you want to associate with this item. You can bind any CSS class to the Menu Item, as well as multiple CSS classes separated by commas.

Show On Hover

Here you can choose whether or not this Link Type should be triggered when hovering over the item. If enabled, the element will be displayed on item hover and click.

Toggle Visibility

This is the expected behavior of the element when you click the item.

If the Toggle Visibility field is turned on, the element will become visible if it was hidden and the other way around.

If you turn off the Toggle Visibility field, you will show the element, no matter the previous visibility state.

Keep Visible

Here you can define the expected behavior once the element has been shown. If you turn on this module field, the element will be visible even though you click on another Menu Item, otherwise the element will be invisible.

This option can be useful to reproduce the different steps of a procedure.

Hide On Menu Button Click

Here you can choose whether or not to hide the element when closing the DiviMenu.

Default is YES.

Hide On Page Click

Here you can choose whether or not to hide the element when clicking outside.

Default is NO.

Initial State

Finally, you might want to set the element initial visibility state when page is loaded. By default is hidden.

Open URL

This field will be visible if the Show On Hover field is enabled.

This field will allow you to open the URL introduced in the URL field rather than showing an element (or elements) when clicking the Menu Item.

This way you will be able to open a URL on Menu Item click and show an element (or elements) on Menu Item hover.

Keep in mind that this option won’t work on touch screen devices (mobiles, tablets, etc) in order to be able to show elements when tapping the Menu Item.

Also, if the Enable Active State toggle field is enabled, the Menu Item will become active when the introduced URL matches the current page URL.

Design > Link > Enter Effect

This field will allow you to animate the page element (or elements) when appearing.

> Custom Effects

Design > Link > Exit Effect

This field will allow you to animate the page element (or elements) when disappearing.

> Custom Effects

Visual Builder / Theme Builder behavior

The hidden elements will be displayed with a 0.5 opacity (this way you will be able to see them and easily edit them).

If you are editing your custom Headers, Footers and Body templates in the Visual Builder instead of Theme Builder, the hidden elements from those Theme Builder templates will be displayed completely hidden so they don’t distract you. Remember that you can change to the wireframe view to edit hidden elements.