¿hasta donde podre llegar?

buen día, el siguiente plugin es muy sencillo, muy poco código, pero cumple su finalidad, es un acordeón, desarrollado con jquery…

ver demo | descargar fuente

el script

lo he nombrado, h2c_acordeon, pueden ponerle cualquier otro nombre, no hay ningun problema.

jQuery.fn.h2c_acordeon = function() {
	var div_id = jQuery(this).attr('id');
	var div = jQuery(this);
	$("#" + div_id).addClass('aco_contenedor');
	$("#" + div_id + ">h1").addClass('aco_titulo');
	$("#" + div_id + ">div").addClass('aco_contenido');
	$("#" + div_id + ">div").hide();
	$("#" + div_id + ">h1").click(function(){
		$(this).next('div').slideToggle("fast");
	}).mouseover(function(){
		$(this).addClass('aco_foco');
	}).mouseout(function(){
		$(this).removeClass('aco_foco');
	});

}

el css

.aco_contenedor{
	margin: 0px 0px 20px 0px;
}

.aco_titulo{
	font-size: 11px;
	margin: 0px;
	color: #6FA7D1;
	cursor: pointer;
	background-color: #DDECF7;
	padding: 8px;
	border-bottom: 1px solid #fff;
}
.aco_contenido{
	padding: 20px 20px 0px 20px;
	border: 1px solid #DDECF7;
	border-top: 0px;
}
.aco_foco{
	color: #E17919;
}

el html

        <div id="u1" style="width: 400px;">

            <h1>Conejo</h1>
            <div>
                <p>contenido 1</p>
            </div>

            <h1>Aqui viene el titulo 2</h1>
            <div>
                <p>Contenido 2</p>
            </div>

            <h1>Aqui viene el titulo 3</h1>
            <div>
                <p>Contenido 3</p>
            </div>

        </div>

la unión

<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="h2c_acordeon.js"></script>
<link href="h2c_acordeon.css" rel="stylesheet" type="text/css">

la ejecución

finalmente, para poder ponerlo en marcha, debes ejecutar lo siguiente

                $("#u1").h2c_acordeon();
                $("#u2").h2c_acordeon();

observaciones

no he podido darle propiedades como $(“.divs”).h2c_acordeon();, el único modo de llamarlo es indicando el id del div a encontrar, cualquier problema, escribir una respuesta a este post, muchas gracias…