Acordeon con JQuery y CSS
Por: el 21/julio/2010 Cat. Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 CSS, JQuery
Este es uno de los widgets que más se están usando por su funcionalidad y sencillez. El códio lo he visto en la página de SohTanaka, y me gustó mucho la forma en que presenta el tutorial, asà que he decidido seguir sus consejos e intentar analizar el código para ver cómo funciona, además de aportar algo más en el diseño.
Ej. 1: Acordeon con JQuery y CSS
JQuery + CSS
AcordeonMétodo: .toggle()
Diseño y Mantenimiento Web
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh.
MAQUETACIÓN
Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.
Distintos lengüajes de diseño
HTML, CSS, JavaScript
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor.
Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris.
Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.
Proyectos
Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.
Desarrollo y Mantenimiento
Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.
Páginas Comerciales
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.
Asesoramiento
Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.
HTML
Consiste en varios pares de bloques compuestos de TÃtulo y Contenido.
<div class="acordeon">
<!--Pares de TÃtulo y Contenido -->
<!--Par-1 -->
<h2 class="accion"><a href="#">TÃtulo</a></h2>
<div class="acordion_cont">
<div class="bloque">
<!--Texto e Imágenes -->
</div>
</div>
</div>
CSS
Lo más importante es el fondo y el padding de la etiqueta h2. Aquà se ha utilizado una misma imagen para los dos estados, activo y reposo, variando la posición de la imagen de top para el esado en reposo y bottom para el estado activo.
La clase «acordion_cont» asignada al div que le sigue al tÃtulo, será luego utilizada para localizar el elemento que debe mostrarse y ocultarse. Contine a su vez un div al que se le ha aplicado la clase «bloque» con un padding de 20px.
JQuery
/* Acordeon */
$(document).ready(function(){
$(".acordion_cont").hide();
$('.accion:first').addClass('active').next().slideToggle("slow");
$('.accion').click(function(){
if( $(this).next().is(':hidden') ) {
$('.accion').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false;
});
});
Cuando se carga el documento:
-
- Se oculta todo el contenido con la clase que se ha pasado como localizador, en este caso: .acordion_cont
- La pseudoclase :first permite determinar el primero de los elementos al que se le ha aplicado la clase ‘accion’, para activarlo. Luego se localiza de manera similar el siguiente elementto del mismo tipo (div) y se le aplica el método .slideToggle(), que consiste en colapsar alternativamente su altura.
Cuando hacemos click:
-
- Se le aplica el método .toggleClass() al elemento pulsado. Este método permite agregar o quitar la clase ‘active’ que es la que se le ha pasado como parámetro. Acto seguido se determina el siguiente elemento y se muestra mediante .slideDown().
- Una lÃnea más se ha agregado como condicional, para completar la funcionalidad del widget y que no se nos queden abiertas las ventanas según las usamos. Para ello se usa el condicional «if» que determina en primer lugar si presionamos el tÃtulo de una ventana que esté cerrada, de otra manera no ocurrirá nada. Si la ventana está cerrada, quitará todos los elementos que tengan la clase ‘active’ y cerrará el contenedor abierto. Finalmente otorga la clase ‘active’ al elemento pulsado y abre el contenedor que le corresponde, y que es el siguiente.
