No estoy familiarizado con javascript y lo probé todo el día sin éxito, así que me gustaría pedirles ayuda. Encontré este código que cambia de sección según el botón en el que se hizo clic. Entonces, cuando se hace clic en un botón y está activo, una sección está visible y otras están ocultas. Cuando vuelvo a hacer clic en el botón activo, todas las secciones están ocultas y los botones están inactivos. Me gustaría mantener siempre una sección visible. Quiero evitar el segundo clic para ocultar todas las secciones. La única opción sería cambiar a otro botón -> cambiar de sección, pero no tengo idea de cómo hacerlo.
Aquí está el código y el sitio donde lo obtuve https://wpjunction.net/elementor-toggle-visibility/
<script> var divs var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); btn1.onclick = function(event){ event.preventDefault(); toggleDivs("sect1",this); }; btn2.onclick = function(event){ event.preventDefault(); toggleDivs("sect2",this); }; btn3.onclick = function(event){ event.preventDefault(); toggleDivs("sect3",this); }; function toggleDivs(s,btn){ if(btn.classList.contains("btn_active_state")){ document.getElementById(s).classList.remove("shown"); btn.classList.remove("btn_active_state"); document.getElementById(s).classList.remove("shown"); return; }else{ btn1.classList.remove("btn_active_state"); btn2.classList.remove("btn_active_state"); btn3.classList.remove("btn_active_state"); btn.classList.add("btn_active_state"); document.getElementById("sect1").classList.remove("shown"); document.getElementById("sect2").classList.remove("shown"); document.getElementById("sect3").classList.remove("shown"); document.getElementById(s).classList.add("shown","fade"); } } //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: #FFCC00 !important; } @keyframes fade_in_anim { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0px); } } </style>