Hide Show Elementor Softexpert

How to hide or show elements with a button click in Elementor

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:
	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";

One comment

  1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *