0

Tengo la siguiente función:

function openReal(realName) {
var i;
var x = document.getElementsByClassName("real");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; 
}
document.getElementById(realName).style.display = "block";  
}

Lo que hace esta función es abrir los divs que tienen la misma clase en una especie de 'tabs', al dar click en otro boton se cierra el antiguo div, lo que quiero lograr es que pueda cerrar ese div con el mismo boton con el cual lo abri, ya quite:

x[i].style.display = "none";

para quitar la funcion de que se cierren cuande click en otro botón, pero no sé como hacer lo que estoy buscando.

<button onclick="openReal('primero')">Abrir primero</button>
<div id='primero' class='real'>CONTENIDO</div>

<button onclick="openReal('segundo')">Abrir primero</button>
<div id='segundo' class='real'>CONTENIDO</div>

<!-- ETC ... -->

<style>
.real{
display: none;
}
</style>

3 respuestas 3

3

Por la manera en que tienes construido tu codigo, creo que no es necesario ni siquiera el ciclo for, prueba lo siguiente:

function openReal(realName) {
    document.getElementById(realName).classList.toggle('hidden')
  }
.hidden {
  display: block !important;
}
<button onclick="openReal('primero')">Abrir primero</button>
<div id='primero' class='real'>CONTENIDO</div>

<br>

<button onclick="openReal('segundo')">Abrir primero</button>
<div id='segundo' class='real'>CONTENIDO2</div>

<!-- ETC ... -->

<style>
  .real {
    display: none;
  }
</style>

1

Podrías hacerlo con un condicional así:

function openReal(realName) {
  var i;
  var prevDisplay = document.getElementById(realName).style.display;
  var x = document.getElementsByClassName("real");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
  }
  if(prevDisplay === "none")
    document.getElementById(realName).style.display = "block";  
}
1

En estos casos lo más fácil es crear una clase, por ejemplo .abierto

.real.abierto{display:block}

Al hacer click en el botón el elemento .real correspondiente haces alternar (toggle) la clase .abierto.

Espero que sea útil.

let botones = document.querySelectorAll("button")
let divs = document.querySelectorAll(".real")

botones.forEach((b,i) =>{
  b.addEventListener("click",()=>{
    divs[i].classList.toggle("abierto")
  })
})
.real{
display: none;
}
.real.abierto{display:block}
<button>Abrir primero</button>
<div class='real'>CONTENIDO</div>
<br>
<button>Abrir segundo</button>
<div class='real'>CONTENIDO</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.