Como expandir y colapsar un div con jQuery

Stay hungry, stay foolish

Steve Jobs

En esta ocasión les explicare un pequeño script que nos permite colapsar y expandir un div con un efecto de slide utilizando la libreria jQuery.

El estilo CSS que vamos a utilizar para este ejemplo es el siguiente:

#titulo{
	background:#479E49;
	padding:5px;
}
#contenido{
	background:#8BD76A;
	padding:20px 10px;
}
.imgcolexp{
	float:right;
	width:16px;
        cursor:pointer;
}

El codigo HTML para este ejemplo es el siguiente, vamos a colocar un div para el titulo, dentro de el vamos a insertar las imágenes para expandir y colapsar con el atributo  id=”arrow-down” e id=”arrow-up respectivamente. Y utilizaremos un div para colocar el contenido que vamos a colapsar o expandir, este div tendra el atributo id=”contenido”

<div id="titulo">
    Expandir y colapsar div
    <img src="imagenes/up.png" id="arrow-up" class="imgcolexp"/>
    <img src="imagenes/down.png" id="arrow-down" class="imgcolexp"/>
</div>
<div id="contenido">
    Este es el contenido que se va a coultar y mostrar al hacer clic en las flechas del titulo
</div>

Ahora pasemos al codigo jQuery, al cargar la pagina se muestran las dos imágenes, es por esto que tenemos que ocultar la imagen para expandir(flecha hacia abajo).

$("#arrow-down").css("display","none");

Después asignamos el código que se va a ejecutar con el evento clic para ambas imágenes:

$("#arrow-up,#arrow-down").click(function () {
	$("#contenido").slideToggle("slow");

	if($("#arrow-up").css("display") == "block")
	{
		$("#arrow-up").css("display","none");
		$("#arrow-down").css("display","block");
	}
	else
	{
		$("#arrow-up").css("display","block");
		$("#arrow-down").css("display","none");
	}
});

La primer linea asigna al elemento con el atributo id=”contenido” el efecto que se va a ejecutar cuando se haga clic sobre alguna de las dos imagenes.

$("#contenido").slideToggle("slow");

Con el if verificamos que imagen es la que esta visible en ese momento, si la imagen para colapsar esta visible entonces dicha imagen se oculta y se muestra la imagen para expandir, de lo contrario se oculta la imagen para expandir y se muestra la imagen para colapsar. en esta parte se muestra una imagen y se oculta la otra.

if($("#arrow-up").css("display") == "block")
{
    $("#arrow-up").css("display","none");
    $("#arrow-down").css("display","block");
}
else
{
    $("#arrow-up").css("display","block");
    $("#arrow-down").css("display","none");
}

El codigo completo queda asi:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Expandir y colapsar div</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
#titulo{
	background:#479E49;
	padding:5px;
}
#contenido{
	background:#8BD76A;
	padding:20px 10px;
}
.imgcolexp{
	float:right;
	width:16px;
	cursor:pointer;
}
</style>
<script>
$(document).ready(function(){
	$("#arrow-down").css("display","none");

	$("#arrow-up,#arrow-down").click(function () {
		$("#contenido").slideToggle("slow");

		if($("#arrow-up").css("display") == "block")
		{
			$("#arrow-up").css("display","none");
			$("#arrow-down").css("display","block");
		}
		else
		{
			$("#arrow-up").css("display","block");
			$("#arrow-down").css("display","none");
		}
	});
});
</script>
</head>
	<div id="titulo">
		Expandir y colapsar div
	    <img src="imagenes/up.png" id="arrow-up" class="imgcolexp"/>
    	<img src="imagenes/down.png" id="arrow-down" class="imgcolexp"/>
	</div>
	<div id="contenido">
    	Este es el contenido que se va a coultar y mostrar al hacer clic en las flechas del titulo
    </div>
<body>
</body>
</html>