Como recomendación, mejor trabaja con display
, ya que con visibility
el elemento seguirá ocupando espacio aunque no sea visible y podría dar una apariencia extraña.
Ahora, también puedes apoyarte en el uso de clases, hace el código un poco más largo pero le da mejor legibilidad a todo el proceso.
Después pudes jugar con las clases según el valor que tengas en tu etiqueta H3. La función toggle()
simplemente cambiarás las clases e invocará a la función showOrHide()
, que es la que contiene la lógica para decidir si se muestra una u otra etiqueta. Luego podrías reemplazar la función -toggle()
- (o cambiar su comportamiendo) para que en lugar de hacer un cambio, asigne la clase correspondiente según el valor de H3.
const tagH1 = document.getElementById("titleH1");
const tagH3 = document.getElementById("titleH3");
function showOrHide() {
const isH1Hidden = tagH1.classList.contains('hidden');
console.log(`Es H1 visible? ${!isH1Hidden ? 'Si': 'No'}`);
if (isH1Hidden) {
tagH3.classList.remove('hidden');
tagH3.classList.add('visible');
} else {
tagH3.classList.add('hidden');
tagH3.classList.remove('visible');
}
}
showOrHide();
function toggle() {
const isH1Visible = tagH1.classList.contains('visible');
if (isH1Visible) {
tagH1.classList.add('hidden');
tagH1.classList.remove('visible');
} else {
tagH1.classList.remove('hidden');
tagH1.classList.add('visible');
}
showOrHide();
}
.hidden {
display: none;
}
.visible {
display: block;
}
<h1 id="titleH1" class="hidden">¡Felicidades has completado todas las preguntas!</h1>
<h3 id="titleH3" class="visible h4 mb-3 font-weight-normal text-secondary">{{ tes.nameModality }}</h3>
<button onClick="toggle()">Toggle</button>