Hello again! In our next part of our Elementor Tutorial series, we are featuring one of the most commonly asked questions on building Elementor websites: How to show and hide sections in Elementor.
One way to do this is by using the Elementor Tabs widget. The Tabs Widget however, has its limitations in terms of customization of look and feel. Ideally, we want to toggle the visibility of sections with clicks on button widgets that we can customize according to our design.
The image above would be a simple structure we want to achieve. With 3 different customized buttons which shows or hide the sections below based on which one is being clicked on. In your use case, of course, will have a different design and a different number of sections and buttons.
How to Show / Hide Elementor Sections
To achieve this, we will have to use CSS and Javascript. Don’t worry, there’s nothing complicated here, you’ll just need some basic knowledge on how to change some codes to target your buttons and sections.
For context, in this tutorial we will using the Hello Elementor Theme with Elementor Pro installed. This code should work with any Theme for Elementor. However, don’t worry as you won’t be needing Elementor Pro to implement this solution.
Assign IDs to Buttons and Sections
First of all let’s start by assigning CSS IDs to each of the buttons and Sections. For the buttons, click on one of your buttons and click on “Content” Tab, scroll down all the way and you’ll see a “Button ID” field.
Assign an unique ID to this button. Remember, an ID has to be unique so it can only be assigned once per page. Follow the instructions on naming conventions on IDs. You can use a combination of Letters (A-z), Numbers (0-9) and underscore character. Also note that you cannot use spaces in IDs.
Once you have finished doing that, repeat the steps for all your buttons. The ID we use in this example button is “btn1″,”btn2” and “btn3” for simplicity.
Next we have to assign IDs for the sections as well. Click on one of your sections and click on “Advanced” Tab, scroll down all the way and you’ll see a “CSS ID” field.
Don’t worry about the different terminology used, IDs mean the same thing. While you at it, lets assign CSS class called “hidden” as well.
Once you have finished doing that, repeat the steps for all your sections. The ID we use in this example button is “sect1″,”sect2” and “sect3” for simplicity. And remember to add in the “hidden” class to every section as well.
CSS for Hiding Sections
Next, we must define a CSS class for hiding an element. To do so, we use the HTML widget to insert our custom code. Search of “html” in the Elementor search box, if you cannot find the widget.
Place the widget after your buttons and sections. A good practice is to place the HTML widget as the last item of the page. Go to the content tab and paste in the following codes
<style> .elementor-editor-active .hidden { display:block; } .hidden{ display:none; } .shown{ display: block !important; } </style>
The first CSS rule of this code is to allow the section to be shown by default in Elementor editing screen. While the “.hidden” rule hides the section. Preview the page you are working on and sections should be hidden. We also defined a CSS rule for forcing an element to display.
Javascript for Controlling Behavior
In the same HTML widget, we will also insert in a piece of Javascript to control the behavior of our button clicks.
<script> var btn1 = document.getElementById("btn1"); // replace with your button IDs var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); //Click Event Handlers for buttons btn1.onclick = function(event){ event.preventDefault(); toggleDivs("sect1"); }; btn2.onclick = function(event){ event.preventDefault(); toggleDivs("sect2"); }; btn3.onclick = function(event){ event.preventDefault(); toggleDivs("sect3"); }; //function to hide or show function toggleDivs(s){ //reset document.getElementById("sect1").classList.remove("shown"); document.getElementById("sect2").classList.remove("shown"); document.getElementById("sect3").classList.remove("shown"); //show document.getElementById(s).classList.add("shown"); } </script>
As usual, we are not using JQuery for this. Because, well, we don’t have to depend on JQuery for this interaction. And since we are inserting a Javascript code inside the body of the document, JQuery may not have loaded at this point. So it is more prudent to use vanilla Javascript instead.
To use this code, of course, you’ll need to customize the variables according to your use case. Let’s go through the code:
var btn1 = document.getElementById("btn1"); // replace with your button IDs var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3");
The top bit of code basically assigns a variable to the Buttons. If you have say 5 buttons, you may want to repeat line 5 times with different assignments to different button IDs.
btn1.onclick = function(event){ event.preventDefault(); toggleDivs("sect1"); };
The next bit of code (above) is an event handler for the button. The function “toggleDivs” is called with an argument “sect1”. The argument, in your case will be the ID of the section you want to show.
function toggleDivs(s){ //reset document.getElementById("sect1").classList.remove("shown"); document.getElementById("sect2").classList.remove("shown"); document.getElementById("sect3").classList.remove("shown"); //show document.getElementById(s).classList.add("shown"); } </script>
The function “toggleDivs” here, is a controller for the Sections. First, by resetting the visibility and then showing the relevent section.
The Full Code
This piece of code is of course not the most efficient code and there’s lots of opportunities for refactoring.
<script> var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); btn1.onclick = function(event){ event.preventDefault(); toggleDivs("sect1"); }; btn2.onclick = function(event){ event.preventDefault(); toggleDivs("sect2"); }; btn3.onclick = function(event){ event.preventDefault(); toggleDivs("sect3"); }; function toggleDivs(s){ //reset document.getElementById("sect1").classList.remove("shown"); document.getElementById("sect2").classList.remove("shown"); document.getElementById("sect3").classList.remove("shown"); //show document.getElementById(s).classList.add("shown"); } </script> <style> .elementor-editor-active .hidden{ display:block; } .hidden{ display:none; } .shown{ display: block !important; } </style>
Elementor Template Download
Download complete project files here! Simply unzip the file, import the layout (.json format) into your Elementor Template library.
Part 2: Toggle Section / Widget Visibility with the same button
Not quite enough? Due to requests from my readers, check out the continuation of the project to include a button active state and toggling section or widget visibility when a button is clicked for a second second time.
Widget Solution
If you however, prefer a Elementor Addons solution, here are some of our favorite options.
ElementsKit Advanced Tab is our preferred widget to achieve this function with a good level of design options. The Plus Addons for Elementor offers an unique option where a slider and tab widget can be combined to interact with one another.
Conclusion Show Hide Sections
So there you have it. An easy to way to show and hide Sections in Elementor. We hope that this tutorial will help you master Elementor and Web Design in general. Do check out our other WordPress and Elementor related articles.
Very nice!! im just looking for a static bar in the footer that you can hide by a button (close) similar to the accept cookies bar… how can i use this code to do that?
I’m trying to do this for a section as well, but I’m not succeeding…
Hi Andy, a full code (elementor json file) download has been added in the article. hope this helps!
In a section with 2 columns, is it possible to set a button in column 1 to show/hide column 2?
Possible but cleaner if you were to target an inner section within the 2nd colum instead.
Works as a charm!!!
But I have a question. How can I, for example have section one displayed on screen(unhidden) when I refresh the page, and when I click other sections it will automatically switch between them?
Sure you can! Just add 2 lines of code just before the end script tag like so:
btn1.focus(); //force first button to focus
btn1.click(); //force first button to click
</script> //existing end script tag
Thank you!!! this helped me too!
Hello,
I don’t understand why but it doesn’t work for me. I have followed everything and yet the section does not appear when I click on the button.
Could you help me please ?
Sorry for the bad English, I’m using google translate.
—————————
Bonjour,
Je ne comprend pas pourquoi mais ça ne marche pas pour moi. J’ai bien tout suivis et pourtant la section ne s’affiche pas quand je clique sur le bouton.
Pourriez-vous m’aider s’il vous plait ?
Désolé pour le mauvais anglais, j’utilise Google traduction.
Hi works very well!
Id like to have section 1 activated which would be great, and then of course same functionality as it is, you can switch beteween the buttons.
Is this possbile?
What i mean with “activated” = onse entering the site section1 is allready clicked auto (active)
and then possibility to switch 🙂
Hi Kristian, see answer to Ana above and just add a couple of extra lines of code will do!
Hi there,
I don’t seem to be able to get the second part of this to work on my website. The first part that forces the content to be hidden on the preview website but shown in the editor works perfectly. But I can’t seem to get it so that it works with the buttons in revealing and hiding it?
Any advice would be hugely appreciated. I’m using the Ocean WP theme.
Thanks!
Dylan
Hi Dylan, do try to download and import the full code (added in the article). Hope this helps!
I have to say this is probably the best WP related post I have ever seen. So simple, elegant and amazingly useful. Thank you for sharing.
Is it possible to add a “second click to hide section”
Of course! take a look at part 2 of the article: https://wpjunction.net/elementor-toggle-visibility/
This was SO helpful thank you so much for providing this code & tutorial!
My “reveal/show” button works well, but is there a way to click the same button to”re-hide” what it had revealed?
For instance, the button says “show more” and the section is revealed, and then you can click the same button to “show less” and it collapses again?
Thanks so much!
hello, can you check what the issue is here. I’m trying to use two instances of this code. I have changed ID’s for the second instance of buttons and sections.
Below is the link to the page
http://revamp.coinvest.co.in/index.php/test/
Hi Shyam, You’ll have to update the codebase and all the IDs as well
Hi , first of all very nice snippets , works fine.
I have the same request as Amy.
Is it possible to add a “second click to hide section” again so that only the buttons are visible.
Regards
Wim Bax
Sure! find our how to toggle visibility with the same button here: https://wpjunction.net/elementor-toggle-visibility/
I downloaded your code and installed this for a quick check.
It worked as I want it.
Thank you very much .
I certainly will buy you a cup of coffee/donate
Regards
Wim Bax
Thank you Wim Bax for your kind support!
I have one question. This script works for me fine. but I want to show the section using the slider button. But it does not work with slider. Can you please help me to do this. I’m using the smart slider. I added a button there but I cant see any option to add a button id there.
Hi,
Thank you so much for this.
I have one question, is it possible to only have one section and multiple buttons. Each button shows different text in that one section.
Sure! Just change place the appropriate IDs on the text or header elements. Should work just fine.
Such a useful article – thanks. I’ve implemented mine just fine.
Is there a way to add an “active” class to a btn so that it’s clear which button is selected?
Many thanks
Sure! Check out the continuation article where several improvements are made. Hope you’ll find it useful! https://wpjunction.net/elementor-toggle-visibility/
DUDE!!!! You were the last piece of the puzzle to make a seemingly impossible idea possible. Thank you so much for your help and hard work!
You’re Welcome mate!
If I wanted to have first section show as default, but then disappear once one of the other sections were clicked, what do I have to do?
Simple! in the part where you add the “hidden” class just add the “shown” class as well. For clarity, in the default Elementor Section you wish to show add “hidden shown” in the class
This did help me a lot! Thank you!
Thank you for this wonderful write up and works well. Would it be possible to have 2 sets of buttons underneath? As in, use 1 set of buttons to show the other, which then allows you to press and get to the content. Doing it as it is hides both sections, and playing with that part of the code breaks the section from showing at all
You can nest a “button set” as an inner section in “Sect1” for example and within “Sect1” and so on. Name the “Section 1 – Level 2″ buttons perhaps like so:”btn1a”,”btn1b” etc. And further inner sections as “Sect1a” and so on. Therefore the current code will control the visibility of a “Set”. Then, you will need to duplicate “toggleDivs” and name it as perhaps “toggleSetA” and change the div IDs to match the inner sections “Sect1a”, “Sect1b” etc. Lastly, give each button a corresponding onClick handler (just duplicate and rename) and of course the level 2 buttons should be calling “toggleSetA” instead of “toggleDivs”. Test, rinse and repeat for every other “Sets”. You’ll end up with a relatively long piece of javascript code…basically the full code (less the css) for every set. but who cares…as long as its working
Thanks for the quick reply! I’ve managed to get working thanks to you and it acts exactly as I want it to. The final HTML block is almost 4 times the length but it works and that’s all that matters. If anyone ever needs the solution in the future, the trick is to create an alternate function for the nested buttons that don’t clear away the main sections. Simply leave the line of code under //show but remove everything else. Thanks again admin!
Glad it works for you! And do share / like or consider a buying me a coffee 🙂
Hello! I want to ask, is it impossible to show more than one section with a click of a button? When it is only 1 section, the script is working as intended but when I want to add another section, it doesn’t work anymore.
It only shows the second section instead of the first and second section to show.
Hi, I am unable to get the section’s content (text) to appear on screen while revealing the section through the complete javascript and css code I used. Please help.
Amazing work Thank you!
How can i use one button to show and hide section 1?
Means first time we click in button 1 then it will show section 1;
Again we click on button 1 then it will hide the section 1 again,
Please suggest
Sure! Details in our follow up article here: https://wpjunction.net/elementor-toggle-visibility/
Hi, thank you very much for your very useful tutorial!
I have one question, is it possible to make the same feature, but instead of a button, make it with a text element? It would behave like a hyperlink (color and highlight) but when I click on it, it displays a hidden section.
Thank you again!
Sure. you can either give the anchor link an ID in a text element like so : Text or fill up the ID of a header element
Thank you so much that worked 🙂
Is it possible to show/hide two sections with 1 button press?
sure it’s possible. you’ll have to rejig the toggle divs function with conditions like so:
function toggleDivs(s){
if(s===’sect1′){
//if toggleDivs(“sect1”) is called then do the following
// show sect1 & sect2
document.getElementById(‘sect1’).classList.add(“shown”);
document.getElementById(‘sect2’).classList.add(“shown”);
//hide sect3
document.getElementById(“sect3”).classList.remove(“shown”);
}else{
//reset
document.getElementById(“sect1”).classList.remove(“shown”);
document.getElementById(“sect2”).classList.remove(“shown”);
document.getElementById(“sect3”).classList.remove(“shown”);
//show
document.getElementById(s).classList.add(“shown”);
}
}
Awesome thank you
Thanks so much! Using this on my website 🙂 One question, is it possible to add something to the button (like an anchor link) so that when I click it, it scrolls down to the section that is appearing. The way I have it now the button shows the section but I have to scoll down manually. Thank again!
You’re welcome 🙂 and you can add a scroll code like so in the last line of toggleDivs:
//show
document.getElementById(s).classList.add(“shown”);
// scroll to target div
document.getElementById(s).scrollIntoView({ behavior: ‘smooth’});
}
Here’s Another use case using a select box.
Any way to make this change on hover? I tried updating the onclick to mouseover but that didn’t work and not sure what else to add/edit to make it work.
Hi Carolyn, sure just replace onclick with onmouseover
Thanks 🙂
Thank you so much. I was traying to solve this for two days. Perfect!
thaanks for this great tutorials it workd just fine, now if i want to change the button color if clicked and change it back to it original color if another button is clicked how can i do that please ?
Hi, thanks a lot for this article, that’s what I needed!
I just got one last question. Is it possible to have the btn1 active when the page is first loaded, so that when people arrive on the page, they can see the first section without clicking on any button ? I hope I am clear..
Is that possible ? What lines of code would do that ?
Thank you very much in advance!
Hello,
Please what is the .elementor-editor-active class?
The code works, clicking it unfolds my section well. But I would like to reproduce this code so that in this section again, clicking on a button brings up a second section. How to target it?
Thank you so much! This works really well…
I wanted to ask, if I wanted to use the button to show the section and then in the section to use another link or icon to close the section… how can i do that? Thank youu