Ejemplo para ocultar y mostrar un elemento en CSS

Cuando estamos desarrollando una página web, a menudo necesitamos ocultar o mostrar elementos en respuesta a acciones del usuario, como hacer clic en un botón o pasar el mouse sobre un área específica. En este artículo, exploraremos cómo ocultar y mostrar elementos utilizando CSS y algunas técnicas de JavaScript para crear interacciones dinámicas.

1. Ocultar un Elemento con CSS

La manera más sencilla de ocultar un elemento en CSS es utilizando la propiedad display. Al establecer display: none, el elemento no solo se oculta, sino que también no ocupa espacio en el diseño de la página. Aquí hay un ejemplo básico:

HTML

html
<button id="toggleButton">Mostrar/Ocultar</button>
<div id="myElement" class="hidden">
    Este es un elemento que se puede ocultar o mostrar.
</div>

CSS

css
.hidden {
    display: none;
}

En este ejemplo, el <div> con el texto "Este es un elemento que se puede ocultar o mostrar." está oculto por defecto debido a la clase hidden.

2. Mostrar el Elemento con CSS

Para mostrar el elemento nuevamente, podemos usar JavaScript para agregar o quitar la clase hidden. Aquí tienes cómo hacerlo:

JavaScript

javascript
document.getElementById("toggleButton").addEventListener("click", function() {
    var element = document.getElementById("myElement");
    if (element.classList.contains("hidden")) {
        element.classList.remove("hidden"); // Muestra el elemento
    } else {
        element.classList.add("hidden"); // Oculta el elemento
    }
});

En este código, cuando el usuario hace clic en el botón, se verifica si el elemento tiene la clase hidden. Si la tiene, se elimina para mostrar el elemento; si no la tiene, se agrega para ocultarlo.

3. Alternativas: Usar Opacidad y Visibilidad

Además de usar display, también puedes ocultar elementos utilizando visibility y opacity, lo que ofrece efectos diferentes:

Usando `visibility`

css
.hidden {
    visibility: hidden; /* El elemento está oculto pero ocupa espacio */
}

Usando `opacity`

css
.hidden {
    opacity: 0; /* El elemento es completamente transparente */
    pointer-events: none; /* Desactiva la interacción con el elemento */
}

Cuando uses visibility: hidden, el elemento seguirá ocupando espacio en el diseño, mientras que con opacity: 0, el elemento será invisible pero todavía ocupará su espacio.

4. Ejemplo Completo

Aquí tienes un ejemplo completo que combina todo lo anterior:

HTML

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ocultar y Mostrar Elemento</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="toggleButton">Mostrar/Ocultar</button>
    <div id="myElement" class="hidden">
        Este es un elemento que se puede ocultar o mostrar.
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

css
.hidden {
    display: none;
}

JavaScript (script.js)

javascript
document.getElementById("toggleButton").addEventListener("click", function() {
    var element = document.getElementById("myElement");
    if (element.classList.contains("hidden")) {
        element.classList.remove("hidden"); // Muestra el elemento
    } else {
        element.classList.add("hidden"); // Oculta el elemento
    }
});

Conclusión

Ocultar y mostrar elementos en CSS es una técnica fundamental para crear experiencias interactivas en la web. Usando propiedades como display, visibility y opacity, puedes controlar la visibilidad de los elementos de manera efectiva. Con la adición de JavaScript, puedes hacer que estas interacciones sean dinámicas y respondan a las acciones del usuario, mejorando la usabilidad y la experiencia general de la página.

Buscar este blog

Vía Electrónica