Estoy usando el widget HTML para Elementor, un creador de temas de Wordpress. Estoy tratando de mostrar/ocultar secciones ( sect1 - sect12 llamado HTML , CSS , Javascript y Node ) cuando hago clic en ciertos botones ( btn1, btn2, btn3 , llamado Frontend Developer , Backend Developer y Designer ), y lo hice funcionar , pero cuando actualizo la página, no se puede hacer clic en los botones. Cada botón controla 4 secciones, por lo que btn1 -> sect1 - sect4 , btn2 -> sect5 - sect8 , btn3 -> sect9 - sect 12 .

 <script> .elementor-editor-active .hidden{ display:block; } .hidden{ display:none; } .shown{ display: block !important; animation: fade_in_anim 0.5s; } .btn_active_state{ background-color: #D9D3FF !important; } @keyframes fade_in_anim { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0px); } } const buttons = [...document.querySelectorAll("[id^='btn']")] const mapping = [[0, 4], [4, 8], [8,12]] const sections = [...document.querySelectorAll("[id^='sect']")] for(let i = 0; i < 3; i++) { buttons[i].addEventListener('click', function(event) { event.preventDefault(); toggleDivs(this) for(let j = mapping[i][0]; j < mapping[i][1]; j++) { sections[j].classList.add("shown", "fade") } }) } function toggleDivs(btn){ buttons.forEach(b => b.classList.remove("btn_active_state")) btn.classList.add("btn_active_state") sections.forEach(s => s.classList.remove('shown')) } //force button1 state initialise, if required btn1.focus(); btn1.click(); </script> <style> .elementor-editor-active .hidden{ display:block; } .hidden{ display:none; } .shown{ display: block !important; animation: fade_in_anim 0.5s; } .btn_active_state{ background-color: #D9D3FF !important; } @keyframes fade_in_anim { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0px); } } </style>