Elementor: Toggle Visibility Tutorial

Hello again! This post is a continuation of our earlier tutorial – How to show and hide sections in Elementor. Some of our readers had requested a feature of toggling an Elementor section with the same button click (when the button is pressed twice) and we will be adding and refactoring our previously written Javascript codes.

Just a quick recap before we begin, the image below shows the structure of what we are trying to achieve. But this time, we shall add a small function to hide relevant section when the same button is clicked again. Also we will be adding an “active state” to the buttons.

Although the article is written in the context of toggling section visibility, you could also apply the same concept to individual widgets.

How to Toggle Elementor Widget/Section Visibility

Again, we do not need Elementor Pro for this tutorial, the free version will suffice. Lets review what we have done previously.

<style> 
.elementor-editor-active .hidden{ display:block; } 
.hidden{ display:none; } 
.shown{ display: block !important; } 
</style>

Here’s our CSS codes that we have used before. Luckily, these codes does not need alteration. But we’ll just add a little something to indicate that the button is active.

Add a Button Active State CSS Class

First, we’ll give it an appropriate class name and a simple background color. Like so:

.btn_active_state{
background-color: #FFCC00 !important;
}

You can also change text color or anything else you prefer. Although we should add “!important” to each CSS rule so that it will supersede Elementor’s settings.

Testing out Button Active State

To test out the button state, we’ll just make some minor alteration to the Javascript code. Note that this step is temporary, for testing only. I kinda like to test things out as i go along so that i can see what it looks like.

btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1");
this.classList.add("btn_active_state")
};

Make a small alteration by adding a line to add our newly created CSS class in the on click handler for the first button. On clicking on Button 1, you should get a result like below:

Cool. But nothing too fancy.

Javascript for Controlling Behavior

Alright, before we dive into the Javascript, lets define how we want the 3 sections and buttons to behave.

1. Only 1 Section to be shown at any given time
2. When a button is clicked on the second time, the corresponding section is also hidden.

You could also allow multiple sections to be shown at once but for the purpose of this tutorial, we are going to code according to the rules set above. We’ll re-use the toggleDivs function that we already have in place and extend it to accept an additional parameter to track which button is clicked. And Alter the click event handler to accept the new parameter.

btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1",this);
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2",this);
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3",this);
};
//function to hide or show
function toggleDivs(s,btn){
//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");
}

Alright, now that we are passing the essential parameters to the function, lets write a conditional if statement to check the state of our button. The basic structure like so:

function toggleDivs(s,btn){
if(btn.classList.contains("btn_active_state")){
// if the clicked button contains the active state class
// hide the corresponding section
}else{
// if button is not active
// reset all buttons and sections to hide and add active state to current button.
// set section to visible
}
}

Ok now lets complete the javascript code in our conditional statement.

function toggleDivs(s,btn){
if(btn.classList.contains("btn_active_state")){
document.getElementById(s).classList.remove("shown");
btn.classList.remove("btn_active_state");
document.getElementById(s).classList.remove("shown");
}else{
btn1.classList.remove("btn_active_state");
btn2.classList.remove("btn_active_state");
btn3.classList.remove("btn_active_state");
btn.classList.add("btn_active_state");
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById(s).classList.add("shown");
}
}

Animation

To finish off, let’s add a little animation to your CSS to refine our snippet. In this example, we’ll add a little fade animation and a little movement to our Elementor Sections.

The following CSS snippet starts off with the Section being invisible and the positions it higher up the screen display by 30 pixels. And the animation completes by being completely visible and back to the original position.

@keyframes fade_in_anim {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}

Now that the CSS is ready lets apply this to our .shown CSS class. Simply add an additional line “animation: fade_in_anim 0.5s” with 0.5s being the duration of the animation.

.shown{
display: block !important;
animation: fade_in_anim 0.5s;
}

The Full Code

Of course, like i always say, there are certainly more efficient (and extensible) ways to write this snippet. But I’m just going to leave it as it is. If you have a more efficient way of writing this, please do share in the comments!

<script>
var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1",this);
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2",this);
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3",this);
};
function toggleDivs(s,btn){
if(btn.classList.contains("btn_active_state")){
document.getElementById(s).classList.remove("shown");
btn.classList.remove("btn_active_state");
document.getElementById(s).classList.remove("shown");
return;
}else{
btn1.classList.remove("btn_active_state");
btn2.classList.remove("btn_active_state");
btn3.classList.remove("btn_active_state");
btn.classList.add("btn_active_state");
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById(s).classList.add("shown","fade");
}
}
//force button1 state initialise, if required
//btn1.focus();
//btn1.click();
</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
animation: fade_in_anim 0.5s;
}
.btn_active_state{
background-color: #FFCC00 !important;
}
@keyframes fade_in_anim {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
</style>

Code Customisation

The first step to customising this piece of code is to understand it. Which is a pretty simple thing to do. Refer to Elementor Show Hide Tutorial for a simple walkthrough of the code.

Now let’s have a simple exercise to say add a button to close all sections. First, of course, we need to add a Close Button to Close all opened sections. Then Give it an ID, say “btnClose”. Next, of course we need to add click handler function for this new button. Like so:

var btnClose = document.getElementById("btnClose");
btnClose.onclick = function(event){ 
event.preventDefault(); 
};

Next we will want to remove the shown class in all the sections. In fact, this block of code already exist in the toggleDivs function. So lets create a new function to reset the all states and remove the shown class.

function resetBtn(){
btn1.classList.remove("btn_active_state"); //reset buttons if active
btn2.classList.remove("btn_active_state");
btn3.classList.remove("btn_active_state");
document.getElementById("sect1").classList.remove("shown"); //reset visibility if shown
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
}

Lastly, add a function call to resetBtn to the onClick handler.

var btnClose = document.getElementById("btnClose");
btnClose.onclick = function(event){ 
event.preventDefault(); 
resetBtn();
};

While wirting the code directly into the btnClose handler is certainly possible, it’s a personal preference of mine to separate the code into individual functions. So that more than one button may call the function (reusability). And its easier on the eyes as well.

So further understanding of the code, i hope that this will help you in applying this in your own projects. Consider the code in the bottom. Can anyone tell me what behavior will this effect? :)

btn3.onclick = function(event){ 
event.preventDefault(); 
resetBtn();
document.getElementById("sect3").classList.add("shown","fade");
document.getElementById("sect2").classList.add("shown","fade");
document.getElementById("sect2").classList.add("btn_active_state");
document.getElementById("sect3").classList.add("btn_active_state");
};

Elementor Template Download

Download complete project files here! Simply unzip the file, import the layout (.json format) into your Elementor Template library.

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 Elementor Toggle Visibility with the Same Button

So there you have it. An easy to way to toggle Section or widget visibility in Elementor. We hope that this tutorial will help you master Elementor, coding and Web Design in general. Do check out our other WordPress and Elementor related articles.

• Best Elementor Addons
• Remove Elementor paragraph bottom spacing
• Elementor Dropdown box Tutorial