Plugins

DiviMenus

DiviMenus - $49

A powerful menu builder that brings the coolest designs and popups to Divi!

Floating DiviMenus

Floating - $9

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $9

A DiviMenus add-on that brings the coolest Social Sharing buttons to Divi!

DiviMenus On Media

On Media - $9

Display DiviMenus on Images & Videos to add stunning Media options!

DiviSignatures

DiviSignatures - $19

Design Email Signatures with Divi and paste them into your Mail Settings!

DiviPasswords

DiviPasswords - $9

Password Protect sections, rows, columns and modules with Divi!

DonDivi

Layouts

Check these awesome layouts out. Already a DonDivi user? Download them from your account area!

Extra Tools

DonDivi plugins also include Exclusive Extra Tools to help you. Save money and forget additional plugins!

DonDivi

About us

We create premium tools for improving your creativity and simplifying the way to design stunning websites.

Special Bundle!

DiviMenus & Family

DiviMenus & Family - $69

This stunning Bundle includes the DiviMenus module and its 3 new Add-ons:
Floating + Sharing + On Media.

Members

Log in

Access your downloads, layouts and support. If you have purchased at Elegant Themes > Register.

Documentation

Access all the detailed information about our plugins and get the most out of them!

FAQ & Support

Already a DonDivi user? Send us a ticket from your user area and we will reply as soon as possible.

Contact us

Toggling page elements visibility

How to show and hide page elements on click!

SERVICES

Your Title Goes Here

Your content goes here. Edit or remove this text inline.

Your Title Goes Here

Your content goes here. Edit or remove this text inline.

Your Title Goes Here

Your content goes here. Edit or remove this text inline.

CONTACT

Do It Yourself!

 

In this tutorial we are going to use DiviMenus Flex to show and hide a page section on Menu Item click.

For that purpose, please reproduce the following steps.

Add the elements to the page

First of all, you need to add the elements that you want to show. For this example we want to show a section.

Give them a CSS ID / CSS Class

This will bind the page elements to the Menu Item that will show them. For this example we have assigned the yellow-section CSS ID to the section.

If you want to show multiple elements, you will need to give them CSS classes instead.

Add a DiviMenu to the page

Choose either the DiviMenus module or the DiviMenus Flex module from the modules list.

Add a Menu Item

Click on Add New Menu Item and type Show.

We are customizing the Menu Item style for this example, but you can leave it as is and move on to the next step. 

Change the Link Type to Show

Now, we will be able to show the elements that we previously added to the page!

Showing the page elements

Once we have selected the Show Link Type, we can finally show and hide our section on Menu Item Click!

For that purpose, we only have to type our section CSS ID in the CSS ID field and leave the remaining fields as is.

🥳 That’s it!

Feel free to use all the Show Link Type fields to customize the behavior of the page elements that we are showing.

Apart from typing the CSS ID or CSS class of the element(s) that you want to show, you can change the visibility behavior, show on Menu Item hover instead, hide them when either clicking outside them or closing the DiviMenu, as well as other customizations this Link Type provides and you may need.

We will be adding tutorials on the Show Link type and other features every now and then. Please, check our website and subscribe to our YouTube channel for upcoming updates!

👉 Subscribe to our YouTube channel

More Videos