Te enseño cómo crear un botón que permite Mostrar y Ocultar contenido en tu página con JS. Es útil para ocultar grandes listados de elementos y dar la libertad al usuario para verlos todos o mostrar solo una parte.
- Dificultad: fácil
- Tiempo de implementación: 5 min
- Código: HTML, CSS y JS
Botón de ejemplo
Si sigues los pasos de este tutorial, conseguirás algo parecido a esto. Haz clic para ver cómo funciona:
Verso 1:
Con un clic en el botón, el contenido se revela,
Los secretos en la web se muestran de manera bella.
Cajas ocultas en la sombra, ahora brillas al sol,
Gracias a un poco de código, el diseño tiene rol.
Verso 2:
Cuando presionas “Ver Todo”, el escondido se asoma,
Cada elemento oculto, ahora a la vista se entona.
El botón de “Ocultar” al instante se activa,
Así en tu página, la magia se hace viva.
Estribillo:
Mostrar y ocultar, con un clic en la pantalla,
Transforma tu web, de manera tan sencilla.
JavaScript y CSS, en perfecta unión,
Dando vida a la web, con esta solución.
Verso 3:
El JavaScript trabaja, en un ciclo sin fin,
Cambiando la visibilidad, y el diseño es el festín.
Con cada interacción, los botones van a bailar,
De mostrar a ocultar, la magia se va a mostrar.
Verso 4:
La clase oculto manda, su orden es claridad,
Los elementos se esconden, sin perder su calidad.
Los botones alternan, sin dejar de brillar,
Con un clic en la web, la diversión está por llegar.
Estribillo:
Mostrar y ocultar, con un clic en la pantalla,
Transforma tu web, de manera tan sencilla.
JavaScript y CSS, en perfecta unión,
Dando vida a la web, con esta solución.
Cómo ocultar un div con Javascript
Para crear un botón que permita mostrar y ocultar contenido en tu página web, primero definiremos la clase .oculto en CSS para ocultar elementos. Luego, usaremos JavaScript para alternar la visibilidad de los elementos seleccionados y los botones correspondientes. En nuestro caso lo aplicaremos a un div. Para ocultar un div con JavaScript y manejar la visibilidad del botón, utiliza document.querySelectorAll y document.getElementById. De esta manera, puedes controlar cómo ocultar elementos en CSS y cómo ocultar un botón en HTML.
¡Haz estos dos pasos!
1. Código para el HEAD de tu página
Introduce este código entre las etiquetas <head> y </head> de la página:
<style>
.oculto {
display: none;
}
</style>
<script>
function toggleCajas() {
var cajas = document.querySelectorAll('.caja');
var mostrarButton = document.getElementById('mostrar-button');
var ocultarButton = document.getElementById('ocultar-button');
var algunoOculto = Array.from(cajas).some(caja => caja.style.display === 'none' || caja.style.display === '');
cajas.forEach(function(caja) {
if (algunoOculto) {
caja.style.display = 'block';
} else {
caja.style.display = 'none';
}
});
if (algunoOculto) {
mostrarButton.style.display = 'none';
ocultarButton.style.display = 'inline-block';
} else {
mostrarButton.style.display = 'inline-block';
ocultarButton.style.display = 'none';
}
}
</script>
2. Código del botón Mostrar/Ocultar
Este es el código HTML que debes utilizar en el botón:
<div class="caja oculto">Contenido que deseas ocultar</div>
<div>
<button id="mostrar-button" onclick="toggleCajas()">Ver Todo</button>
<button id="ocultar-button" onclick="toggleCajas()" style="display: none;">Ocultar</button>
</div>
Explicación de cómo funciona el código
Este código incluye elementos de CSS, JavaScript y HTML. Su objetivo es mostrar y ocultar una lista de elementos (cajas) en una página web cuando el usuario hace clic en los botones «Ver Todo» y «Ocultar». A continuación, se desglosan los diferentes segmentos del código y cómo funcionan:
CSS:
- La clase
.ocultodefine un estilo que oculta elementos al establecer la propiedaddisplayanone.
<style>
.oculto {
display: none;
}
</style>JavaScript:
- La función
toggleCajases invocada al hacer clic en uno de los botones. - La función selecciona todos los elementos con la clase
cajay los botones de mostrar y ocultar. - Verifica si al menos uno de los elementos
cajaestá actualmente oculto. - Basado en esta verificación, alterna la visibilidad de todos los elementos
caja. - Finalmente, ajusta la visibilidad de los botones de mostrar y ocultar para reflejar la acción realizada.
function toggleCajas() {
var cajas = document.querySelectorAll('.caja');
var mostrarButton = document.getElementById('mostrar-button');
var ocultarButton = document.getElementById('ocultar-button');
var algunoOculto = Array.from(cajas).some(caja => caja.style.display === 'none' || caja.style.display === '');
cajas.forEach(function(caja) {
if (algunoOculto) {
caja.style.display = 'block';
} else {
caja.style.display = 'none';
}
});
if (algunoOculto) {
mostrarButton.style.display = 'none';
ocultarButton.style.display = 'inline-block';
} else {
mostrarButton.style.display = 'inline-block';
ocultarButton.style.display = 'none';
}
}
HTML:
- Se definen dos botones: uno para mostrar los elementos ocultos y otro para ocultarlos. El botón de ocultar inicialmente está oculto (
style="display: none;").
<div class="caja oculto">Contenido que deseas ocultar</div>
<div>
<button id="mostrar-button" onclick="toggleCajas()">Ver Todo</button>
<button id="ocultar-button" onclick="toggleCajas()" style="display: none;">Ocultar</button>
</div>Ejemplo de cómo usarlo
Supongamos que tienes una página web donde quieres mostrar y ocultar una lista de funcionalidades de un producto. Podrías implementar el código proporcionado de la siguiente manera:
- HTML: Define una lista de funcionalidades dentro de divs con la clase caja y oculto.:
<div class="caja oculto">Funcionalidad 1</div>
<div class="caja oculto">Funcionalidad 2</div>
<div class="caja oculto">Funcionalidad 3</div>
<!-- Botones -->
<div>
<button id="mostrar-button" onclick="toggleCajas()">Ver Todo</button>
<button id="ocultar-button" onclick="toggleCajas()" style="display: none;">Ocultar</button>
</div>
- CSS y JavaScript: Copia y pega el código CSS y JavaScript proporcionado en el head de tu documento HTML.
¡Ya lo tienes!
