Como expandir y colapsar un div con jQuery

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>

2 comentarios en “Como expandir y colapsar un div con jQuery”

  1. Gustavo dice:

    Fantástico, la he utilizado y personalizado un poco, me sirve perfecto… Gran aporte, me gustaría saber si es posible que por defecto el div que contiene la información esté oculto

  2. Hola Gustavo, supongo que ya lo habrás resuelto pero para los que tengan la duda, para que por defecto el div que contiene la información esté oculto, hay que meter en el div de contenido style=”display:none;” y ya está. Quedaría así:

    Espero que os sirva

Deja un comentario