¿hasta donde podre llegar?

hector2c, mi bitacora

jQuery – crear plugin simple para acordeón

with 5 comments

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…

Anuncios

Written by hector2c

febrero 11, 2010 a 11:29 am

5 comentarios

Subscribe to comments with RSS.

  1. Hola tiene un extraño compartamiento en firefox 3 en ie funciona normal pero en firefox hace saltos cuando los desplego todos y luego empiezo a recogerlos de abajo hacia arriba empieza a hacer brincos en la pagina

    saludos

    carlos andres restrepo

    marzo 13, 2010 at 8:15 pm

  2. hola amigo tu ejemplo esta muy chevere, ahora mi consulta es como puedo hacer para q el primer contenido del acordion aparesca desplayado y no todo. me gustaria q me ayudes. gracias

    Giancarlo

    abril 12, 2010 at 12:46 pm

  3. excelente plugin, pero si lo intento anexar a wordpress no me hace la animacion q hace, solo funciona con html,
    si pudieras ayudarme a como debe ir relacionado xon wordpress te lo agradeceria

    favio

    julio 19, 2010 at 12:18 pm

    • hola, si logras hacer que este plugins funcione en wordpress podrias decirme como porque toy tratando de implementar esto en mi blog si si desean ver mi blog es http://www.blog.teraclicksistemas.com donde voy agregar temas de todo lo q es la informatica internet cursos telf…. algo amplio para facilitar el manejo de toda la tecnologia espero la ayuda y/o colaboracion en mi blog de todos 😀

      djsap2006

      abril 28, 2011 at 11:38 pm

  4. excelentes ejemplos que tienes mira yo estoy intentando desarrollar un sistema factura en jquery el problema esta cuando agrego una fila a una tabla mediante un boton en la fila, en cada fila que agrego hay un combo en la primera columna y en la segunda columna una caja de texto donde deberia mostrar el dato segun aya seleccionado en el combo pero no logro hacerlo asi podrias ayudarme con un ejemplo

    carlos

    marzo 1, 2011 at 7:40 pm


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: