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?
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 hereconst btn1 = document.querySelector(".section1");
enter code hereconst btn2 = document.querySelector(".secss");
enter code hereconst section1 = document.getElementById("section1");
enter code hereconst section2 = document.getElementById("section2");
enter code herebtn1.addEventListener("click", function() {
enter code heresection1.classList.add("hidden");
enter code here});
enter code herebtn2.addEventListener("click", function() {
enter code heresection1.classList.remove("hidden");
enter code heresection2.classList.add("hidden");
enter code here});