2

Estoy intentando hacer un codigo para que al clicar en diferentes div se muestren y se oculten. Ejemplo:

Tengo 7 divs, al hacer clic en 1 de ellos, los otros 6 se tienen que ocultar. El problema es que no consigo ocultar los 6 div que no deben aparecer.

Tengo el siguiente codigo que no se si es correcto pero me "funciona". Pero claro, me "funciona" solo con 1 div. A partir de aquí, no se como añadir las diferentes combinaciones.


function divLogin(){ 

   if(clic==1){

   document.getElementById("abrir").style.height = "auto";
   document.getElementById("cerrar").style.display = "none"; 

   clic = clic + 1;

   } else{

       document.getElementById("abrir").style.display = "none"; 

    clic = 1;

   }   

}

1 respuesta 1

1

Yo lo haria asi. Creas un evento onclick donde le pasas el índice del div como argumento. Al llamar al evento con Javascript haces un bucle que pase por todos divs y todos los que no coincidan con el argumento donde has hecho click, se le añade una clase y se le cambia el estilo a esa clase.

 function hideDivs(clickedIndex) {
        const divs = document.getElementsByClassName("div-box");
        for (let i = 0; i < divs.length; i++) {
          if (i !== clickedIndex) {
            divs[i].classList.add("div-hidden");
          }
        }
      }
 .div-hidden {
        display: none;
      }
<div class="div-container">
      <div class="div-box" onclick="hideDivs(0)">Div 1</div>
      <div class="div-box" onclick="hideDivs(1)">Div 2</div>
      <div class="div-box" onclick="hideDivs(2)">Div 3</div>
      <div class="div-box" onclick="hideDivs(3)">Div 4</div>
      <div class="div-box" onclick="hideDivs(4)">Div 5</div>
      <div class="div-box" onclick="hideDivs(5)">Div 6</div>
      <div class="div-box" onclick="hideDivs(6)">Div 7</div>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.