In this tutorial, I will show you how to hide or show elements with a button click in WordPress using Elementor free version.
If you want to keep an element or section hidden and display it with a button click, you can do it easily with the following piece of code.
For more details, please watch this video tutorial.
Updated Video (No code required)
Code Here: 👇
HTML Code:
<button onclick="myFunction()">Click Me</button>
CSS Code:
#SoftExpert{
display: none;
}
Js Code:
function myFunction() {
var x = document.getElementById("SoftExpert");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Hi, congratulations and thanks for the code.
It works fine but I have some problems:
1) The first click fails, so at the first visit to the page I have to make 2 clicks to activate the function, then once activated it works well with each click. But by refreshing the page, the problem returns.
2) When I click on the button, the css hover class remains active and to deactivate it you have to click anywhere on the page.
How can I solve these 2 problems? Thank you
Hi thank you very much for the code, but my question is, what if I want to use classes instead of ID on the Javascript code, how do I do that?
The reason is, that I am aware that one can only call an ID just once on a web page, but I want to use this function for more than one section with different class names