Show a section only if after button selection

Hello,

This can be achieved using custom JavaScript and CSS code.

1. Section CSS Class (Elementor UI)
Go to: Section → Advanced → CSS Classes
Add the following class:
reveal-section

2. Button CSS Class (Elementor UI)
Go to: Button → Advanced → CSS Classes
Add the following class:
reveal-btn

3. CSS (to hide the section by default)
Add the following code under Appearance → Customize → Additional CSS
(or Elementor → Site Settings → Custom CSS):

.reveal-section {
    display: none;
}

4. JavaScript (to display the section when the button is clicked)
Add the following code via Elementor → Custom Code (Footer)
or in an HTML widget:

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".reveal-btn").forEach(function (btn) {
        btn.addEventListener("click", function () {
            const section = document.querySelector(".reveal-section");
            if (!section) return;

            section.style.display = "block";
            btn.style.display = "none"; // optional: hide button after click
        });
    });
});
</script>

Best regards,
8Theme Team