Small Pirate

En esta ocasión les traigo un tuto para colapsar y expandir un div con un efecto de slide utilizando la libreria jQuery.

DEMO:
http://spirateritos.zobyhost.com/

al final de su estilo-sp.css agregar este codigo:

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

buscar este code:
</head>
y antes agregar:

<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>

para utlizarlo seria de la siguiente manera, una llamada desde con el div.

<div id="titulo">
      Expandir y colapsar
Ejemplo de uso:
MOSTRAR SPIRATE 2.4 ó Ocultar SPIRATE 2.4 para los bobos de php...

       <img src="imagenes/up.png" id="arrow-up" class="imgcolexp"/>
       <img src="imagenes/down.png" id="arrow-down" class="imgcolexp"/>
   </div>
   <div id="contenido">
       Aqui el contenido a coultar y mostrar al hacer clic en el boton.
    </div>

Espero y les sirva, cualquier duda comentar, si encuentran algun error hacer criticas contructivas que estoy aprediendo.

no seria mejor con un onclick


<a onclick="$(\'#divOne, #divTwo\').toggle();">Expandir o Contraer</a>

<div id="divOne">contenido 1</div>
<div id="divTwo" style="display:none">contenido 2</div>


espero sirva ^^

por favor mas explicado para los recien llegado
no entendemos ni lo que significa jquery menos vamos
a saber que es lo que hace este truco