How to hide MULTIPLE sections and show only one section in Elementor with a button (NOT Accordion)?

Question

I have multiple sections in Elementor with IDs #section1, #section2, #section3 and so on... I created buttons and each button functionality should be to show only one section and hide ALL others. I can do that only for 1 section and 1 button with JS, but it seems I am not successful with multiple sections. I need to do that without refreshing the page. Any ideas?

Answer 1

Am not sure if this is what you want but seems to work for me

enter code here

`enter code here`</div>
`enter code here`<div id="section2">

`enter code here`</div>

`enter code here`<button class="section1">button1</button>
`enter code here`<button class="secss">button2</button>

use your own styling

the javascript enter code here "use strict";

enter code here const btn1 = document.querySelector(".section1"); enter code here const btn2 = document.querySelector(".secss");

enter code here const section1 = document.getElementById("section1"); enter code here const section2 = document.getElementById("section2");

enter code here btn1.addEventListener("click", function() { enter code here section1.classList.add("hidden"); enter code here });

enter code here btn2.addEventListener("click", function() { enter code here section1.classList.remove("hidden"); enter code here section2.classList.add("hidden"); enter code here });