Elementor Show hide Sections

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.

Show Hide Section Structure

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:

Elementor Button Active State

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.

Subscribe
Notify of
guest
32 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mark Kinsey
6 months ago

This tutorial is an absolute lifesaver as I’m factoring this into a design I’m working on.

The only question I have, can you advise how to create a smoother animation when the section appear instead of them just popping up, say for instance a scroll down so that it looks like its appearing from the top of the screen or from behind a full-width section?

ZRs
6 months ago

It’s Work for Button only ? can this code work for Link / Image Box / Icon.

Cynthia
Cynthia
6 months ago

Hi,
I downloaded the template, everything works.
I changed the section to a paragraph, but it doesn’t recognize the section. I added the ID because I saw it wasn’t filled in, but it still doesn’t work. Or does this code work differently?

Edit:
nevermind I forgot to add the hidden class. Sorry.

Last edited 6 months ago by Cynthia
Ana
Ana
6 months ago

Hi,
First of all, thank you for the solution. It works like magic.
I have a button like yours and I change the color on click, but I also have an icon on that button, which I want to show only on button click and when the button is active. I managed to hide the icon when no button is clicked. But i don’t know how to make it show after button click.
Do you have any idea?

Ana
Ana
Reply to  wpjunction
6 months ago

I’ve tried like you said but it’s not working :(.
The icon has the class .elementor-button-icon

Ana
Ana
Reply to  wpjunction
6 months ago

Yes, it worked. But instead of i tag, I used svg tag, as I’m using a custom icon. Thank you very much!

Laszlo
Laszlo
5 months ago

This tutorial is exactly what I need. Thank you so much! May I suggest a few things to improve the functionality?

  • Do you plan to create a version where we can toggle multiple columns with one button (you mentioned that in the article)?
  • Do you plan to add a button to close all opened sections?
  • It is possible to create more button to open and close sections?

All 3 would be awesome and at least 2 is necessary to aid a solution for me.

My promblem: I have 4 buttons and 4 sections. I want to create a button which is appears when one section is opened and able to close the opened sections regardless which one is opened.

Torbjörn Hjalmarsson
Torbjörn Hjalmarsson
4 months ago

What am I doing wrong? 🙁
I have entered the code, but does not get the button to link right. When I click the button, I just come to the start of the page.
I have downloaded the zip file on another page and there works. If I copy and put in on the original page, it will still be wrong. On the orginal page I have some section links such as #section

Zbigniew
Zbigniew
4 months ago

How to make 1 section show after page load and button show clicked?

I tried this but not working
<script>
jQuery (document) .ready (function () {
jQuery (“bnt1”). click ();
});
</script>

Last edited 4 months ago by Zbigniew
NOWEK
NOWEK
4 months ago

How to make that one button (btn1) opens and hides all sections (sect1,sect2,sect3,….)

Thanks in advice 🙂

Rokas Jarasunas
Rokas Jarasunas
Reply to  wpjunction
3 months ago

Thank you for tutorial!
I added this script for one button to show 4 sections, but i’m using two buttons and i need another button to show 2 more sections.

Thank you in advance,

Rokas Jarasunas
Rokas Jarasunas
Reply to  Rokas Jarasunas
3 months ago

So this is my code and it’s working, but when the page is loaded first time i have to click twice on buttons to show sections. After first clicks it starts to work fine with one click.

<script>
var divs
var btn2 = document.getElementById(“btn2”);

btn2.onclick = function(event){
event.preventDefault();
toggleDivs(btn2);
};

function toggleDivs(){
   
if(btn2.classList.contains(“btn_active_state”)){

btn2.classList.remove(“btn_active_state”);
document.getElementById(“sect2”).classList.remove(“hidden”);
document.getElementById(“sect2_1”).classList.remove(“hidden”);
document.getElementById(“sect2_2”).classList.remove(“hidden”);
document.getElementById(“sect2_3”).classList.remove(“hidden”);
return;
}else{
btn2.classList.add(“btn_active_state”);
document.getElementById(“sect2”).classList.add(“hidden”,”fade”);
document.getElementById(“sect2_1”).classList.add(“hidden”,”fade”);
document.getElementById(“sect2_2”).classList.add(“hidden”,”fade”);
document.getElementById(“sect2_3”).classList.add(“hidden”,”fade”);
}

}
</script>

<script>
var divs
var btn1 = document.getElementById(“btn1”);

btn1.onclick = function(event){
event.preventDefault();
toggleAll(btn1);
};

function toggleAll(){
   
if(btn1.classList.contains(“btn_active_state”)){

btn1.classList.remove(“btn_active_state”);
document.getElementById(“sect1”).classList.remove(“hidden”);
document.getElementById(“sect1_1”).classList.remove(“hidden”);
return;
}else{
btn1.classList.add(“btn_active_state”);
document.getElementById(“sect1”).classList.add(“hidden”,”fade”);
document.getElementById(“sect1_1”).classList.add(“hidden”,”fade”);
}

}
</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: #FFFFFF !important;
}

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

100% {
opacity: 1;
transform: translateY(0px);
}
}

</style>

Rucke
Rucke
3 months ago

I imported the template and it works perfectly there…..until a change the page layout to “Elementor Full-Width.” Then everything disappears. The buttons and the sections. It only works on Default, Elementor Canvas and Theme. Any suggestions?

Rucke
Rucke
3 months ago

It seems that even in the imported version that is working. It stops working if you change the button css names. Even if you copy, delete the name, and then paste back the exact name, it stops working. I have to reload without saving the page and cancel out the attempted change name for it to work again.

Terry
Terry
2 months ago

Hi. Thank you very much for this. I have a question. My first section is 8 buttons which open 8 sections of buttons beneath it. Works perfectly as per your code. Is it possible to now add that my 2nd section of buttons opens further buttons beneath them? I’m trying to created a nested tab effect, but still want full control of the sections. Thank you in advance.

Rob Matthewman
Rob Matthewman
2 months ago

Great tutorial and almost exactly what I’ve been looking for. I used elementor Pro image buttons that have a rollover state that changes the image on the button when rollover occurs. How can I keep the rollover state of that button active if clicked rather than changing the background colour like in this example?

Rob Matthewman
Rob Matthewman
Reply to  Rob Matthewman
2 months ago

Okay, so I’ve since found some JS that allows me to swap the image on click by using image.src = ‘swappedimage.jpg’ , how can I integrate this into the example you have provided. So just to clarify, I have an image with id=”btn1″, it opens the section correctly, but I also want to change the image source of the button as well when it’s clicked to give an “active” image button. I can get it to do one or the other – Please help, driving me crazy 🙂

Andrea
Andrea
1 month ago

Tutorial is extremely interesting. Is it possible to replace the click on the button with just the mouse hover? Help me please? I don’t have great skills with js. Thank you

Andrea
Andrea
Reply to  wpjunction
1 month ago

Hi, it works perfectly! I have just one final question. If you wanted to activate the section only on hover, without going through it a second time to deactivate it. I hope I have explained myself. The same effect as a menu. Thanks 1000

Nenad Djakovic
Nenad Djakovic
1 month ago

Great tutorial. I have one ask…

What I need to change in code to first button and section be visible when page loaded?

Nenad Djakovic
Nenad Djakovic
1 month ago

You dont need to answer me on my first ask… Sorry…
I finde solution with first one tutorial: 

//force button1 state initialise, if required

btn1.focus();

btn1.click();

And thank you very much. Great page, and great tutorial.