Adds a New Divi Builder Module
This handy plugin adds a new "Show / Hide Button" module to the Divi Builder. It behaves a similarly to 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."
Hi! Great plugin! I have a styling question. On this page (https://new.bullseyeinternet.com/who-are-we/) under "Our Unique difference" I have the buttons on the left and right with the content showing in the middle. there is a weird animation happening where the text starts off at the bottom and then shows up correctly. So it seems like a flicker of sorts. Is there a way to get rid of that?
Thanks, Natalie! The Show / Hide button animates the visibility of the text elements by progressively scaling their height between zero and their full height, using some built-in jQuery functions. But the Equal Heights Columns plugin your using is setting the height of text modules in such a way that it is preventing these jQuery functions from working. The result is that the elements do not shrink / expand in the intended way and end up taking up more space during the animation, giving the weirdness you're seeing. You should be able to resolve this by either:
1. Set the Divi Show / Hide Button transition duration to "0", which will make the element change instant and should avoid the height conflict. If you do want an animation on the transition, you could instead set an animation on the text modules themselves (as described in that linked post).
2. Prevent the Equal Heights Columns plugin from affected the "sh-info" elements. Obviously this would lose the equal height effect. One way to compensate for that would be to set the height of the text modules in the module settings, choosing the same height for each (selected to be large enough for the largest element).
If neither of those options are workable, let me know and I'll try to come up with a more suitable alternative. I hope that helps!
I have several mega menus setup to use on a development site. They were working fine last time I tried them but they're not working now. It should be that when you click a button on the left, new content shows up to the right. I have the content setup in rows and am using the row IDs to show/hide the content. You can see the menu here: https://smiprodev.wpengine.com/divi_mega_pro/resources-menu/ . The buttons appear to hide content but not show the content it should show. Hope you can help. Let me know what more you need from me. This was the only way I saw of contacting you for support. Thanks!
Hi! The issue you're encountering on the page seems to be due to the layout being used twice – once in the hidden mega menu and once in the page body. The elements to be revealed (like "#res-info" and such) are duplicated, which results in their IDs being duplicated as well. Since IDs must be unique, and since jQuery targets only the first instance of an ID, the show/hide button operations apply to the version in the hidden mega menu, not the version on the page. This is why you're not seeing the results you expect.
As a solution, you could completely disable Divi Mega Pro for that page, if that's an option. Alternatively, you could use different IDs for the elements in the two layouts. This would circumvent the duplication issue.
If you need to keep both layouts active and can't change the IDs, consider updating the show/hide button module settings to specifically target the second version of each ID with a more complex selector, e.g.:
#res-info:not(.divimegapro-wrapper #res-info)
On a side note, I've looked at the mega menu on this page: https://smiprodev.wpengine.com/divi_mega_pro/ and saw that the show/hide buttons aren't functioning for a different reason. The Divi Mega Pro's main.js file is producing errors, which are preventing the Show/Hide button's code from running correctly.
I hope this helps! If you have further questions, feel free to reply here or via the contact form – it all ends up in the same mailbox. Thanks!
Hello! Thank you very much for making such an excellent plug-in and giving me detailed and specific email guidelines, which are very helpful, thank you again!
One problem is that opening seems a little slow at the moment? I have about 21 modules and corresponding buttons. DIVI staff suggested that I contact you to see if I can solve the problem of slow opening speed?
This is my website: https://www.appletree.fund/index/
In case you didn't see it, you also replied to you in my email!
Looking forward to your reply. Have a good day!
Hi Sun!
I think this "slowness" could be due to the height of the sections you're trying to hide or reveal. When a section hides, the animation shrinks it from its full height to zero within a span of 400ms, which under normal circumstances, would visibly start immediately. However, because your sections are significantly taller than the browser's height, the animation begins off-screen at the section's bottom. Hence, you only start seeing the shrinking animation when the section height pulls up within the bounds of the browser view.
You should be able to address this by reducing the transition speed of the Show / Hide button.
You'll find the [transition duration setting](https://divibooster.com/adjusting-the-show-hide-button-transition-duration/) under:
Show / Hide Button Settings > Design > Transitions > Transition Duration
Reducing this to something less than 400ms should speed up the switch between sections. You might even want to set the duration to 0ms for an immediate switch.
Should you prefer to retain some element of animation, you could instead apply it to the sections themselves, at:
Section Settings > Design > Animation
This will let you set, for example, a left-to-right slide animation which would result in the animation being visible right from the start.
I hope this helps. Let me know if you have further questions about it.
Dan，Thanks for your detailed and prompt reply !
I set the conversion time of each module to 10ms according to your guidance (see the attached screenshot), but it doesn't seem to work very well. (see my record the screen: https://somup.com/c0QFfbA9AB, this seems to be normal? What further do I need to do? Looking forward to hearing from you.Thank you!
Have a good day!
Hi Sun, Thanks for sharing that helpful video and my apologies for any confusion from my earlier advice.
It sounds like we're actually talking about the initial page load time instead of the speed when switching between sections (which is what my earlier advice was relating to).
In this is the case, it appears that your page is just using / loading a lot of resources (over 100) which is slowing it down.
Most often, page load time can be improved by implementing standard webpage speed-up techniques. There is plenty of advice on this online, so I don't think I'll have much new to add in this case.
One thing I did notice though is that the WpDataTables plugin appears to be one of the primary contributors to the load time. It's loading many resources, including some of the largest and slowest files. Anything you can do to reduce this could be beneficial, e.g.:
I hope that helps!
Love this module!
Is it possible to change the animation style of the show/hide? Right now it is a slide up. ideally like to slide left or right.
I'm really glad you like the module!
There isn't currently a option to change this in the module itself, but I've designed the module to work with the Divi animation feature on the element being revealed for just this situation.
To change the slide-up animation to a slide-left or slide-right, first set 'Transition Duration' to '0ms' under the show / hide button module's 'Design > Transitions' settings to remove the slide-up animation.
Next, on the Divi Builder element you're revealing (i.e., the one you've assigned a CSS ID to be shown / hidden), apply an animation under its 'Design > Animation' settings. 'Slide' would serve well for a horizontal transition. Choose either 'Left' or 'Right' in the 'Animation Direction' setting to get a horizontal slide effect.
Now when you click on the button, the target element should slide in from the left / right.
I hope that helps! Let me know if you have any questions about it.
I need to exclude from delayed javascript. Can you give me the keyword(s) to use or the js url please?
Hey Vincent :)
The module adds inline scripts that begin like so:
<script data-name="dbshb-on-load-handler">
/* wp-rocket exclusion: dbshb-on-load-handler */
I added this to allow exclusion in WP Rocket, but it should work for W3 Total Cache and other such plugins. Just add "dbshb-on-load-handler" to the exclusions list in your caching plugin.
If the above method doesn't resolve the issue or if the delayed script is still causing issues, you could prevent deferral of jQuery altogether. I think we discussed how to do this for W3 Total Cache in the past – here's the post with the technique:
https://divibooster.com/prevent-w3-total-cache-from-deferring-jquery/
I hope that helps, but let me know if it doesn't do what you need.
Thanks!
Hi Dan,
Just to say a big thank you, this plugin is a game changer!!
Just wondering if you can help me. I have the buttons set out on a sticky section (Description / Amenities etc) – is there a way that when I click the button it loads the section and also jumps to the top of page or section.
Link attached.
Look forward to your reply.
You're very welcome, Aaron :)
Am I right in thinking you've figured this one out already. The way to do this would be by setting the "Button Link URL" to the CSS ID of the section you want to jump to, as described here:
Set the Divi Show / Hide Button Link URL
I can see you've given the section with the images the ID "top" and that one of the buttons is clicked it scrolls this image section to the top of the page. Hopefully that is more or less what you had in mind?
One complication I can see on your page is that once the scroll has completed, the fixed header overlays the top of the image section partially obscuring the images. Technically the scroll has worked correctly – the #top section is at the top of the page. But because the header is in "fixed" mode it is not considered part of the page content. This gives the impression of the scroll stopping at the wrong place – in the middle of the images. One solution to this is to instead set the "top" ID on an element higher up that then the header, so that when the scroll completes the header is not in fixed mode and the image section is fully displayed below it. The only element available in your current header layout that you could use for this is the purple header bar. That should work, but of course once the scroll has completed the purple header bar will be visible. If you don't want the purple bar visible, then you could add a new element between the purple bar and main header and set the "#top" id on that. If you add something like a divider module, set its ID to "top" and then style it so that it doesn't impact the visual layout (I think it will need to have some visual presence, but setting it to 1px max height and a white line color should do it) then when the buttons are clicked the scroll should end just below the purple header, with the main header shown and then the image section fully displayed below that… if that makes any sense?
Hi, I'm using this great plugin on https://benjaminpedersen.com on the front page. I'm having trouble with the Active State Button text size on tablet and phone screen widths. On desktop it functions as desired, which is to say the font-size parameter changes correctly between active and non-active states.
On phone widths, for example, I want the active button text to have a font-size of 8vw and non-active of 7vw. On tablet/phone widths, however, the non-active font-size parameter is specified with an "!important" qualifier within a media query (not so on desktop-no "!important" and not within a media query) and so, takes precedence over the active state specification (which is NOT specified with "!important", nor within a media query for the screen width).
The selector for the active state is:
body #page-container .et_pb_section .et_pb_db_show_hide_button_0.dshb-active-button a.et_pb_button
with a declaration of:
font-size: 8vw;
The non-active state selector is:
@media only screen and (max-width: 767px)
body #page-container .et_pb_section .et_pb_db_show_hide_button_0 a.et_pb_button
with a declaration of:
font-size: 7vw !important;
I've selected the "Active Button" section and clicked on the "Use Custom Styles for Active Button" and clicked on the responsive icon to specify different font sizes for each responsive state. This is specified in a preset and I've reset the module styles in the show/hide button module.
in the Advanced > Custom CSS under the "Button" section, I have:
text-transform: none !important;
line-height: 1em !important;
padding-right: 0px;
padding-left: 0px;
This is NOT specified in responsive sections since it's the same for all three responsive modes.
So, I guess I'm wondering if there is a missing media query and/or "!important" specification somewhere?
Thanks for any help!
Hi David, thanks for the detailed analysis of the issue – it helped a lot. I think I've figured out what's going wrong here.
As I'm sure you are aware, the Divi preset system essentially lets you set default values for the module settings, and these defaults are used unless overwritten by the standard module settings.
The problem is that, in the case of the "Use Custom Styles for Active Button" option itself, the preset value is being ignored. While you have it set to "Yes" in the preset, it is, I think, being overwritten by the equivalent module setting which is presumably set to "No". The result is that the active button's custom styles, including the responsive font sizes, are disabled and none of the CSS you're expecting to see is being generated.
This is actually a quirk of the Divi preset system itself – you can see the same issue with the "Use Custom Styles for Button" option in the built-in button module. In theory setting the option to "Yes" in the preset should set the default value of the option to "Yes" in the module settings too, but it currently doesn't.
If I've got this right, then you should be able to get the font sizes working correctly on your site by manually setting "Use Custom Styles for Active Button" to "Yes" in each of the modules' standard module settings.
Obviously that's not ideal and somewhat defeats the purpose of using the preset system. When I have a bit of time I'll play around and see if there's anyway to correct the behavior. I suspect it may not be very easy given the current design of the visual builder and preset system, however…
I hope that helps / makes sense, but give me a shout if it doesn't solve the issue. Cheers!
Hi Dan,
I think I did correctly what you asked and I've not seen any change to the problem. I've created you a loom here: https://www.loom.com/share/7e160defe47e4515a83a91df7d0b8137?sid=262aec3d-84fb-4349-8cf1-ec9594aef2d8 to see what I'm seeing.
Thanks!
David
Hey David, thanks for the loom. Yes, you did what I asked. Sorry it didn't solve it – I think I was slightly off on my assessment. It looks like Divi will actually apply the presets correctly to the module initially, but there are a couple of non-obvious ways to prevent the presets from taking effect. One is disabling the "Use Custom Styles For Button" option in the regular module settings. But the second, which seems to be the issue here, is closing the mobile options for the text size in the regular module settings. Divi interprets this as meaning don't use mobile styles, so your preset mobile text size is ignored. I've written it up in more detail in this post:
Fix Divi Preset Button Styles not Applying
The final section should give you the solution you need – opening the mobile styles in the standard module settings. I hope it helps but let me know if not. Thanks!
Hi Dan,
I sent a reply yesterday and it said that it was pending approval. Don't see it anymore. Not sure if this page still is not taking comments?
Hey David, I got it, thanks. I've just replied to your reply :)
How it works is that when the comment is submitted it gets held in my moderation queue until I approve it (usually at the same time as I'm able to answer it). In the meantime, you'll see the comment as pending, but only while your cookies are maintained. If you close the browser or otherwise clear your cookies you'll no longer see the preview, but it remains in my system and I'll respond as soon as possible.
I hope that makes sense. Cheers!
Hi. Loving this plugin so far.
However I'm having two issues that I can't seem to overcome.
The page I'm referring to is here; https://notjust.design/?page_id=239748#
1.The 'Design.' button is set to display in an Active State upon page load and set to Show Active Button Icon.
The correct active state colour is displayed but not the icon.
2. Every time any of the buttons (Design, Brand, Digital, Content) are clicked the page reloads rather than displaying content that was otherswise hidden.
Please help. Thanks.
Hey RobbieAlpha, it's great to hear you like the plugin :)
Hopefully these answers help:
1) In keeping with the behavior of the standard Divi button, when you enable Show Active Button Icon the icon will only show on hover by default. To make it visible when not hovering, also set:
Show / Hide Button Settings > Design > Active Button > Only Show Icon on Hover for Active Button = "NO"
2) I think you currently have the button group option set to ".ServiceButtons" on the first button and "#ServiceButtons" on the other three. This should just be "ServiceButtons" in all four cases, i.e. without the "#" or ".". Internally, the button group name is used as a CSS class name and the "." is automatically added by the button's code itself where needed. Adding the "." or "#" yourself is resulting in an invalid class name being generated and triggering an error that is causing the reloading behavior. So, if you just stick to letters, numbers, hyphens and underscores in button group it should work correctly. The next update (v1.5.9) will handle this better, by automatically stripping the "#" / "." behind the scenes.
Give me a shout if these doesn't solve the issues.
FYI, I've just released the update (v1.5.9). If you have any questions about it or the fixes I suggested, just let me know. Cheers!
Hi, Love this plug in however I have 7 different sections that I want and hide (toggle) but lets say I click the button to reveal section 3, it shows down the page and not where section 1 would be. (IE: has a gap at the top where the first 2 sections are)
Can I fix this at all. I would like to get the sections opening in the same spot on the page.
Hey geoff, great to hear you like the plugin :) I took a look at the page linked in your comment. While that page looks like it's using the manual code version rather that the plugin, I can see a similar effect there. The issue, in this case, is that you are hiding the code modules but not the rows containing them. So the rows remain in the page and, while they are empty, their margin / padding takes up some space, pushing the later rows further down the page. To solve this, try hiding the entire rows, rather than just the code modules within them. It's entirely possible that the same issue could occur when using the plugin, but if you aren't able to solve it by hiding the entire rows, let me know (with a link to an example page, if possible) so that I can look into it further for you. I hope that helps / makes sense!
Hi, I can't figure out how to hide an element when the button is clicked the second time after it is previously shown. In other words, using the same button to show AND hide a single element/ID. Is this possible? Thanks!
Hi Alexa, it's certainly possible. First you need to hide the element on load, by setting:
Show / Hide Button Settings > Content > When Page Loads… > Hide these Elements = #your-element-id
And then configure the button to "toggle" (i.e. alternate between shown and hidden with each click), by setting:
Show / Hide Button Settings > Content > When Button Clicked… > Toggle these Elements = #your-element-id
Replace #your-element-id with the actual ID of the element you want to show / hide.
Now the element should start hidden and each subsequent click on the button will alternate the visibility of the element.
I hope that does what you need, but let me know if not. Thanks!
This plugin is a game changer. One issue I've come across that I'm actively troubleshooting—If the content that is being revealed isn't entirely in view when it's hidden/revealed it causes the screen jump quite jarringly. Any advice on how to adjust my implementation to avoid this?
Video: https://drive.google.com/uc?id=1nG_lVbyZ-NgretZzr2lb9j4OXPi7tgSY
IDEAS/THOUGHTS
– I've declared a min-width to the section to help reduce CLS as content appears/disappears, I'll try tweaking the values to see if it helps.
– I could change the show/hide to be OnClick so the jumping doesn't happen accidentally as the user scrolls (not ideal, but workable)
Thank you!
Hey DS, did you manage to solve this?
I've just checked the page and it all seems to be working smoothly now. I can't trigger the jump when the content / buttons are partially off-screen.
I've seen behavior like this once before, and if I remember correctly, the issue was that the buttons had their button link URL set to the CSS ID of their containing section, so that clicking on them would bring the container into view. The issue arose because the same CSS ID was reused on the next section. As a result, the buttons would trigger a scroll to (or just leave visible) the correct section, except if the top of that section was off the top of the page, at which point it would instead trigger a scroll to the next section.
Anyway, I can see that you don't have the button link URL set on the buttons, so if that was the issue I guess you've already figured that out. Hopefully everything is now working for you as it is for me, but if not let me know. Thanks!
Hey Dan, I did fix this! I had to set overflow-anchor: none!important; to override the default behavior of the browser. I'm so lucky I found this, saved potentially 8-15+ hours of manual work.
Hey DS, yeah nice one! I'm glad you found it. I haven't really used overflow-anchor much before so I'm not sure I'd have thought of it! Thanks for sharing the solution – I'll do some testing with it and see if I can add it into the plugin to handle cases such as yours. Cheers!
I really like your plugin. Question – the content within a section I'm showing/hiding is important to SEO. If the section is closed on page-load, will this hide the content from search engines also?
Hi Ally, I'm glad you like it :)
My understanding is that Google (and presumably other search engines) will be able to see this content. The content itself remains in the page at all times (i.e. the module just hides it, rather than actually removing it from the page). I believe the search engines will index this content as long as there is a way for the user to unhide it (e.g. by clicking on the show / hide button). What they frown on is content that can't be unhidden by the user, and which would presumably be treated as content that was only there for the purpose of manipulating the search engine.
While I'd expect your content to be indexed, I can't say for sure whether or not it would receive the same weighting in the rankings as content that was visible from the start. Personally, I'd err on the side of making SEO-important content visible initially if possible. Failing that I'd aim to make the button to reveal it as prominent as possible. I can only imagine that a tiny, hard-to-find button would lead to the content it revealed being treated suspiciously – and so it would stand to reason that the opposite would be true.