Updated February 2024
In this tutorial, I'm going to show you how we can add an Elementor button that will toggle the visibility of any other element, including container and sections.
You can think of it as turning any Elementor set of elements into a toggle.
Here are are a few demos of what you will learn in this tutorial:
Features:
- Works with all elements
- Compatible with sections and containers
- Easy setup
- Flexible
- Accessible
Let's get started!
First, let's setup the class names for this Elementor show hide design
Every 'toggle set' will need one (and only one) element with the class name toggleElem, and one (and only one) element with the class name toggleContent.
You can have multiple such toggle sets on your page (as seen in my examples above).
Give them the required class under Advanced > CSS Classes
Ideally, you would probably want to use the button element as toggleElem, however any element will work.
To make this accessible, be certain that you have the "#" in the link field of your toggleElem element.
This goes if you are using an entire container as toggleElem, you will want to go under Additional Options > set the HTML tag to <a>, and then enter '#' in the link field. Be careful not to have any other elements within that also has <a> tags then.
Adding "closing" buttons
This is optional.
If you would like, you can add buttons (or any element really) within your toggleContent container or section, that when clicked on, will close the toggleContent.
Give them the class name toggleClose.
Important: if you choose to add closing buttons, you will need as many on your page as you have toggleElem and toggleContent elements. Say in total you have 10 toggleElem and toggleContent elements on the page, you will need 10 toggleClose elements as well. Point is, you can't have it just for some and not for others.
Now, let's add the code to your page
Add the code below in an HTML element, on the same page as your Elementor Show Hide Container (or other) is.
<script> /* Please login to get the code * The code will be for the Amazing Elementor Show Hide Section Button tutorial * Found at this URL https://element.how/elementor-show-hide-section/ */ </script>
Note that the code will automatically take care of hiding the toggleContent on the front end.
That way, you don't have to mess with the responsive settings, and then have to remove them all when you need to make an edit in one of the toggleContent container or section.
It will produce a small flash on page load though, but it should be barely visible, and even then only if you have this above the fold. Ideally it would be below the fold (i.e. below the part of the page that's visible on page load).
In this version of the code I also added support for Elementor popups. So you can have this custom toggle inside a popup as well.
How the code works
You might be wondering, how does this toggleElem knows that it should open that toggleContent. Good question!
It works with the index. In other words, when it shows up on the page, or more technically, in the DOM / source code.
So the very first element on the page with the class toggleElem with automatically be linked with the very first element with the class toggleContent (and if used, toggleClose). Element 2 with class toggleElem will be linked with element 2 with class toggleContent, and so on.
Adjusting the code
The JavaScript part should be left as is (except if you want an accordion, see below). Towards the end of the code there is some CSS, you might want to adjust it, in particular the transition for the icon in your toggleElem.
Making it an accordion
If you would like only one toggleContent to be open at a time, in other words for your set of custom toggles to behave like an accordion, change these two lines:
<script> /* Please login to get the code * The code will be for the Amazing Elementor Show Hide Section Button tutorial * Found at this URL https://element.how/elementor-show-hide-section/ */ </script>
to
<script> /* Please login to get the code * The code will be for the Amazing Elementor Show Hide Section Button tutorial * Found at this URL https://element.how/elementor-show-hide-section/ */ </script>
Adding anchors to the Elementor Show Hide Toggles
If you would like to replicate what you see in the example that's showcased in the fancy iframe 2 above, where it automatically scrolls to the opened toggleContent and then back up when you close it by clicking a toggleClose, it's quite simple.
You just need to add IDs to your sections / containers, and then link to these in the toggleElem and toggleClose elements.
Finally, enjoy your Elementor Show Hide Anything toggles!
I hope you have enjoyed this tutorial!
Be careful going through the comment section and trying to make modifications from the comments you find there, as it was using an older version of the code. I completely rewrote the code in April 2023 so check the comments from that date forward!
Cheers!
465 Responses
Excellent tutorial ! Thank you ! One thing I noticed is that it pushes the bottom of the container down the page. I tried setting the min. height so their is enough space for the expansion effect to have space to move into without needing to push the bottom down, but even with extra space below the expanding content, the bottom of the section still pushes everything below it down further. What is the best way to maintain the position of the bottom edge of the container so the expansion effect moves into the space and doesn't push the bottom further down ?
Thank you!
Hey Christopher!
I'd need to see it in action to understand what you mean exactly here...
Hi, Maxim!
How can I make a smooth animation so that the container comes out smoothly?
There is a line in the code: "for a smooth animation we move the min height property to the inner container, be certain you are using "boxed" layout if you need a min height", but I don't really understand where to apply it.
Thanks!
I think the jumping to the section with the ID doesn't work anymore with new Elementor version. I mean when you click on a toggleElem button and moving automatically to a toggleContent with a specific ID. If anyone knows a fix would be great.
Hi,
I got the same issue here (and it was working fine 2 weeks ago).
A fix would be greatly appreciated...
Thanks !
Bastien
Hey Bastien, I actually fixed it with the help of AI, try it out, its quite easy.
Hi Mehmet,
Thanks for the hint, I didn't think of it.
I just tried, but with no significant changes...
Maybe you got the fix somewhere, that would be great for me...
Thanks
Jumping to a container by adding ids to the close button and the container isn't working for me either. Can you let us know what your fix was?
Greetings!
Simply delete the lines of code that look like this:
e.preventDefault();
It's present two times in the code, delete both.
Cheers!
I would like to make multiple underlying containers visible after clicking the button. How do I get this done?
Hey Jeffrey!
A simple way would be to wrap them all in a single full width container, and give it the class name toggleContent instead of all the underlying containers.
Cheers!
Hello,
Still got the issue from the jumping to the section ID.
Any idea how to solve it ?
Thanks
Greetings Bastien!
Simply delete the lines of code that look like this:
e.preventDefault();
It's present two times in the code, delete both.
Cheers!
It works perfectly !
Thanks so much
Before the update, I had the same button several times, in different places on the page.
Each button had the same effect: when you clicked on it, it opened the section and went down to the section.
Now it does that for the first button on the page, but for the other two, it doesn't open the section (if you click on the second button first, for example).
Any idea why it behaves like that ?
Greetings,
What you describe is how it actually works.
Having several buttons toggling the same one section isn't how the code works out of the box, for this you need to adjust it.
Change the line
jQuery(contents[i]).slideToggle();
to
jQuery(contents).slideToggle();
I think that should make it work as you want, several toggleElem toggling the same toggleContent
Cheers!
Amazing it's working perfectly now !
Many many thanks !
Welcome!
Anchor part doesn't seem to work for me, I have Elementor and Elementor Pro updated to latest version using sections, not the new containers structure.
it looks like anchor scroll starts and then stops immediately.
I can provide link if needed
Hello.
Jumping to the section ID is no longer working (again), even after deleting both e.preventDefault();
Elementor Pro version 3.34.0
Hi! I'm starting a build using your Show/Hide Section Button code. It's awesome as all of your stuff is. The only thing that doesn't want to work is the anchor. I've never had issues setting up anchors, but it just doesn't seem to work with this. Wondering if there was anything that I needed to update. Thanks!
Hey Steve! Thanks for the kind words!
Do you have a URL I could look at?
Cheers!
Hey Steve!
Add this JS before the closing </script> tag:
document.addEventListener('DOMContentLoaded', function () { $ = jQuery; jQuery('.toggleElem').on('click', function () { let index = jQuery('.toggleElem').index(this); setTimeout(function () { let content = jQuery('.toggleContent').eq(index); if (content.length) { jQuery('html, body').animate({ scrollTop: content.offset().top - 200 /* 200 px offset */ }, 400); } }, 400); /* 400ms delay before scrolling */ }); });Cheers!