Show and Hide Any section/element With Show/Hide Button In elementor

Elementor JavaScript July 23, 2026

This code will help to create a button that can help to hide or show any section/element (using id) on click and on click its text will change from “Show More” to “Hide Extra” or any text you want.

1- Put an HTML widget and paste this code to create a required button.
<button id="toggleButton" onclick="myFunction()">View More</button>
<style>
#BpersShowHide {
    display: none;
}
</style>
<script>
function myFunction() {
    var x = document.getElementById("BpersShowHid");
    var button = document.getElementById("toggleButton");
    if (x.style.display === "none") {
        x.style.display = "block";
        button.innerText = "Hide More"; // Change button text
    } else {
        x.style.display = "none";
        button.innerText = "View More"; // Change button text
    }
}
</script>
2- Add a section or any element and add this id#  ”BpersShowHid“ - This section will now hide and show based on above button.

Hurrah – Done