Ocultar Elementos HTML con jQuery

En muchas ocasiones, como desarrolladores web, necesitamos ocultar elementos HTML en nuestra página. Esto puede ser para mejorar la experiencia del usuario, hacer la página más limpia o para aplicar ciertos efectos de animación.

En este tutorial, veremos cómo ocultar elementos HTML con jQuery.

Preparación

Antes de continuar, asegúrate de tener jQuery incluido en tu proyecto. Puedes descargarlo desde su sitio oficial o utilizar una CDN como Google.

<!-- Incluyendo jQuery desde Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Además, necesitaremos algunos elementos HTML en nuestra página para ocultar. Aquí hay un ejemplo básico:

<!-- Elementos HTML a ocultar -->
<div id="elemento1">Elemento 1</div>
<div id="elemento2">Elemento 2</div>
<div class="clase-elementos">Elemento 3</div>

Ocultando elementos HTML

Para ocultar un elemento HTML utilizando jQuery, debemos seleccionar el elemento y luego llamar al método .hide(). Aquí hay un ejemplo que oculta el primer elemento:

// Ocultando un elemento utilizando su ID
$('#elemento1').hide();

También podemos ocultar varios elementos HTML a la vez utilizando una clase. En este ejemplo, seleccionamos todos los elementos con la clase clase-elementos y los ocultamos utilizando el método .hide():

// Ocultando varios elementos utilizando una clase
$('.clase-elementos').hide();

Mostrando elementos HTML

Si queremos volver a mostrar los elementos ocultos, podemos utilizar el método .show(). En este ejemplo, mostramos el primer elemento que habíamos ocultado anteriormente:

// Mostrando un elemento oculto
$('#elemento1').show();

Al igual que en el ejemplo anterior, si queremos mostrar varios elementos a la vez, podemos utilizar una clase:

// Mostrando varios elementos ocultos utilizando una clase
$('.clase-elementos').show();

Alternando la visibilidad de los elementos HTML

En algunos casos, puede ser útil alternar la visibilidad de un elemento HTML. Para hacer esto, podemos utilizar el método .toggle(). En este ejemplo, alternamos la visibilidad del segundo elemento de nuestra página:

// Alternando la visibilidad de un elemento
$('#elemento2').toggle();

Conclusión

Ocultar elementos HTML en nuestra página web es una tarea común y sencilla utilizando jQuery. En este tutorial, aprendimos cómo ocultar un elemento HTML utilizando su ID o clase y cómo mostrarlo nuevamente utilizando .hide(), .show() y .toggle().