Elementor: Show and Hide Sections Tutorial

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> 
    // replace with your button IDs 
    var btn1 = document.getElementById("btn1"); 
    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"); 
    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");  
    document.getElementById(s).classList.add("shown"); 
}

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"); 
    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.

• Best Elementor Widget & Addons
• Best Elementor Themes
• Remove Elementor paragraph bottom spacing
• Elementor Dropdown box Tutorial