Mostar y ocultar elementos con fadeToggle – jQuery

jQuery nos permite ahorrar mucho código JS, con el método fadeToggle() podemos alternar los métodos fadeIn(), para mostrar un elemento oculto y fadeOut(), para ocultar un elemento visible, en un solo método.

Ejemplo:

Creamos un botón con identificador “boton” que será el encargado de ejecutar el script

<button id="boton">Mostrar/Ocultar elemento</button>

Creamos un elemento <div> con identificador “elemento” que será el elemento al que haremos referencia en el script, y agregamos contenido para mostrarlo en pantalla.

<div id="elemento">
	<p>Texto que se muestra y se oculta mendiante un evento</p>
</div>

El script es muy sencillo, con el selector de elemento “$” seleccionamos el elemento con identificador “boton” seguido de un punto para acceder a la propiedad “click” que será la función que vamos a definir a continuación

Seleccionamos el elemento con identificador “elemento” seguido de un punto para acceder al método fadeToggle(), al cual vamos a pasarle el parámetro “slow” para que se muestre y se oculte lentamente y tenga un efecto más bonito.

<script>
	$(document).ready(function(){
	$("#boton").click(function(){
		$("#elemento").fadeToggle("slow");
	});
});
</script>

Puedes ver y descargar el código de este archivo en mi cuenta de GitHub.