Adds a New Divi Builder Module
This handy plugin adds a new "Show / Hide Button" module to the Divi Builder. It works likes the built-in button module, but instead of linking to another page, it lets you control the visibility of elements on the current page.
With it you can easily bring your pages to life with a range of dynamic effects.
Reveal hidden content at the click of a button. Let users hide the elements they no longer need to see. Or let them repeated hide and reveal (i.e. toggle) elements as they please.
You can even create more complex effects like button-controlled tabs, swapped elements, or multi-step forms. You can even hide the button itself once clicked.
All with one simple module.
Reveal Hidden Content
Keep your pages clean and concise by hiding content initially and letting your users choose if / when to view it. Simply add the CSS id or CSS class of your hidden element at:
Button Settings > When Button Clicked… > Show these Elements
Then when the button is clicked, the elements will be revealed.
If you need to, you can add multiple CSS ids, classes or even complex CSS selectors, separated by commas.
Hide Initially Visible Content
Let your readers hide the content they're finished with, so they can focus on the rest of the page. Simply add the CSS id or CSS class of the elements to hide at:
Button Settings > When Button Clicked… > Hide these Elements
Then when the button is clicked, the elements will be hidden.
Again, if you need to, you can add multiple CSS ids, classes or even complex CSS selectors, separated by commas.
You can hide this by clicking the button above.
Repeatedly Toggle Content
Let your users choose whether or not to view content. Simply add the CSS id or CSS class of the elements to toggle at:
Button Settings > When Button Clicked… > Toggle these Elements
Then when the button is clicked, hidden elements will be revealed and displayed elements will be hidden. Repeated clicks will continue to toggle the elements.
Once again, if you need to, you can add multiple CSS ids, classes or even complex CSS selectors, separated by commas.
You can toggle this by clicking the button above.
Testimonials
John Boase of Wyre Web Design
"I recently downloaded and installed the very reasonably priced Divi Show / Hide Button Module from Divi Booster (whose other plugin, Divi Booster I have used many times over many years) and it makes adding a Show / Hide Button to Divi exceptionally easy without having to know or use any coding…a big bonus for me!
It provides you with the ability to hide or show and / or toggle any section or number of sections and / or any row or number of rows and / or any module or number of modules by just adding whatever CSS ID you choose to the relevant section, row or module and they even show you how to do this on their website. It is so easy yet so powerful and you can have multiple buttons all doing different things on the same page with different button text…amazing!
I did require another feature though and that was to have the button show different text when clicked and open (i.e. button text is 'Read More' when closed but changes to ‘Close' when clicked / opened then changes back to 'Read More' when clicked / closed again so I contacted the developer and Dan responded quickly and said he would add that feature in the next update, which he did 2 days later! Brilliant service.
I highly recommend Divi Booster to anyone who wants 'easy to use' yet essential and productive cost effective plugins for Divi."
Hello, I downloaded the plugin but seems doesn't work. I made a test button and just add #test when button click to reveal the text with this Id but the text appears when I loaded the page. I also made an other test with adding #test (hidden when the page load) / #test reveled when button click but doesn't work either, can you help ? May be I missed something !
Hey Ju, thanks for reaching out. To start with, make sure there's no "#" symbol in the id where it's set on the text element itself (e.g. in it's CSS ID field). So that when you set the id, it has no "#", but when you use it in the show / hide button, it does. It's also possible that there are some other styles on the page preventing the #test element from being hidden initially. Is there any chance you could share a link to the live page or some screenshots showing the setup in the Divi builder, so that I can take a closer look for you? Thanks!
Is it possible to trigger the sho / hide toggle on click of an icon or text link instead of a button?
Hi Maureen,
You can do this just by styling the show / hide button.
To get an icon, leave the button text blank and then set the button icon to be visible at all times by setting:
Show / Hide Button Settings > Design > Button > Use Custom Styles for Button = Yes
Show / Hide Button Settings > Design > Button > Show Button Icon = Yes
Show / Hide Button Settings > Design > Button > Only Show Icon On Hover for Button = No
You may also want to remove the button border at:
Show / Hide Button Settings > Design > Border
That will leave you with just an icon, which you can use to trigger the show / hide.
For a text link, the Divi button module and hence the Show / Hide button module (which is based on it) is actually implemented as a HTML link. It's styled with a border to make it look like a button, but if you remove the button border using the setting I mentioned above you'll be left with a text link.
I hope that helps, but please ask if you have any further questions about it. Thanks!
Hi. I have just installed this and it works perfectly! Is there any way to change the button title depending on toggle state? ie 'Open toggle' and then 'Close toggle'
Hey Lloyd, I'm really glad to hear it's working for you! Yes, there's a setting to set a different the title when the button is "active" (i.e. its content has been toggled open). You'll find it at:
Show / Hide Button Settings > Content > Active State > Button Text
Details are in this post:
https://divibooster.com/change-show-hide-button-text-on-click/
I hope that helps!
Fantastic… works like a charm. Thanks Dan :)
You're welcome, Lloyd, I'm glad to hear it! If there's ever anything you need help with just give me a shout. Thanks!
I need the button to JUMP to the content that is being opened. Is there a way to make this happen?
Hi Jeannie, This post explains how to scroll to and trigger a show / hide button from a link:
https://divibooster.com/trigger-a-divi-show-hide-button-from-a-link/
By adding the JavaScript code to your site and adding a link, of the form given, into your menu, I think you should be able to get the effect your after.
If it doesn't do what you need, or you have any questions about it, please give me a shout. Thanks!
Hi, I am creating a site for a client who wants a visitor to click on an image to reveal hidden content. I have all of the dynamics correct when using the button as the trigger, but cannot figure out how to create the button as the 'image' – I have looked at other comments about this but am having trouble making this happen. The page I am working on is: https://mybegenuine.com/clients/reserve2/sweet-home-mine-gallery/ and I think it would look more elegant to have just the images show/hide (using a toggle effect) the content. Can you point me in the right direction? I love this plugin and have purchased the lifetime version.
Hi Kim, my apologies for the slow reply. One way to do it is using a background image on the button (instead of text), as described in this post:
Reveal a Divi Module (or Row / Section) when Image Clicked
Alternatively, you could make a separate image trigger a click on the button, as described in this post:
Make an Image Trigger a Divi Show / Hide Button
I hope they help, but please let me know if they don't do what you need. Thanks!
Hi Dan! I just installed the plugin and the issues I am having is that the button seems to reload the site, so with toggle on the site reloads and auto hides the content I now want to have show. I have tried a few things to no avail but I am trying to have it hide on load (which works) and then toggle on and off with a button. Is there some setting I missed with the button? Any help would be greatly appreciated!
Really need some help here. I installed the plugin and the issues I am having is that the button seems to reload the site, so with toggle on the site reloads and auto hides the content I now want to have shown. I have tried a few things to no avail but I am trying to have it hide on load (which works) and then toggle on and off with a button. Is there some setting I missed with the button? Any help would be greatly appreciated!
Hi Brandon, sorry I'm just responding to this now. You can get this behavior if something is blocking the module's JavaScript code from running (e.g. a JavaScript error in the page). Alternatively, if you've set the module's "Button Link URL" field, and have used the full URL of the page rather than just the hash component of the URL (e.g. "#some-target"), it would similarly trigger a page reload. If you are able to provide a link to the page you're working on, I'd be happy to take a closer look and hopefully identify the issue for you. Thanks!
Hi Dan, thank you so much for the response. the page is here: https://solvingwork.com/pricing/ I have only made a test button and its set to toggle a section with a row of icons. The finale design of the page is here: https://xd.adobe.com/view/7466434c-899b-4835-b9ed-8ad4989fecd1-2135/?hints=off
Hi again,
I checked the console and there are no issues detected, so as far as I can tell there is not a conflict. I was leaving the "Button Link URL" blank in my first tests because it didnt seem required for the script to run. When the page kept reloading I used my CSSID of "#test22" as the target and while the page no longer reloads, the section does not reveal, either. I feel like I am missing something simple but cannot figure this out. Again the page is here: https://solvingwork.com/pricing/
Hi Brandon, thanks for providing the detailed information and links. I've checked the button setup, and it doesn't seem to be the cause of the issue. Instead, it looks like something is interfering with Divi's jQuery compatibility mechanism.
To give you a bit more context, when the "Defer jQuery And jQuery Migrate" option is enabled at "Divi > Theme Options > General > Performance", Divi moves the jQuery library script from the <head> of the page to the end of the <body>. This movement can cause inline scripts like the Divi Show/Hide Button script to fail as they would be trying to use jQuery before it’s loaded.
Divi offers a solution with the "Enqueue jQuery Compatibility Script" option. When enabled (and it is by default), Divi adds two extra scripts at the start and the end of the page, allowing inline scripts to be registered and executed once jQuery is fully available.
In this case, it appears that something is blocking Divi from adding the second compatibility script to the end of the page. This means the inline scripts are being registered but aren’t running since the execution script is missing. Consequently, scripts like the one for Divi Show/Hide Button (and potentially others) aren't being executed correctly.
Given that Divi doesn't provide an option to enable only the first script, it seems that something else on the site might be interfering. My first suspicion is Jetpack. It has its own jQuery deferral mechanism that could possibly conflict with Divi's. If possible, could you try temporarily disabling it to see if the issue persists? I also noticed that Batcache is active on your site. While less likely to be the culprit, disabling it briefly for a check won't hurt.
If neither of those actions resolves the issue, try temporarily disabling "Defer jQuery And jQuery Migrate" in the Divi Theme options (and if Jetpack is still active, disable its jQuery deferral option). This change should allow jQuery to load earlier and should confirm if the issue does indeed lie within how or when jQuery is loading.
If you can give these steps a shot and let me know how it goes, we can take it from there. Thanks!