Estoy usando este código js para mostrar/ocultar elementos en mi sitio:
<script> function myFunction3() { var x = document.getElementById("dsec-three"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>¿Alguien puede ayudarme a configurarlo para que los elementos se oculten al cargar y solo se muestren una vez activados?
puede usar class para show/hide elementos igual que:
function showHide(){ element = document.getElementById('element1'); showHideEle(element) } function showHideMulti(){ elements = document.getElementsByClassName('multi'); Array.from(elements).forEach(ele => { showHideEle(ele) }); } function showHideEle(ele){ let isHide = ele.classList.contains('hide'); if (isHide) { ele.classList.remove("hide"); } else { ele.classList.add("hide"); } } .hide { display: none } <p class="hide" id="element1">para 1</p> <button onclick="showHide()">Show/Hide</button> <br /> <p class="hide multi">para 2</p> <p class="hide multi">para 3</p> <p class="hide multi">para 4</p> <button onclick="showHideMulti()">Show/Hide Multi</button>Su función myFunction3 ya hace el trabajo de ocultar y mostrar los elementos relevantes. Todo lo que necesita hacer ahora es invocar la función cuando se carga su documento. Puede hacer esto agregando la siguiente línea dentro de su <script> :
document.addEventListener("load", myFunction3); Si necesita que los elementos permanezcan ocultos de forma predeterminada y los muestre después de que se cargue el documento, deberá establecer la propiedad de display de esos elementos en none a través de CSS en línea.
Ejemplo (si su elemento es un div ):
<div id="dsec-three" style="display:none"> ... </div>a que te refieres con activado?
si quiere decir que después de la carga de su página, necesitaría un detector de eventos.
sigue estos pasos:
establezca la visualización inicial de su elemento en ninguno.
cree un detector de eventos como load: y agregue su función allí:
document.addEventListerer('cargar', function(){ myFunction3(); })
el código anterior le dice al navegador: 'siempre que se cargue la página, llame a esta función'