Efecto Acordeón con jQuery 1

Y bueno, como comentaba antes me llamo mucho la atención jQuery junto con Prototype, así que sigo explicando ciertos efectos que son muy útiles y sencillos de implementar, hoy explicare como hacer un acordeón de opciones con jQuery.

   Primero que nada debemos cargar la librería y cargar cada uno de los efectos a utilizar, y luego comenzamos a cargar los efectos que queramos, veamos las opciones que tenemos, primero un acordeón sencillo, veamos el html básico:

Titulo 1
el contenido 1
  
Titulo 2
el contenido 2
  
Titulo 3
el contenido 3
  

Y el script de jQuery sería:

jQuery('#mi_id').accordion();
  header: 'mi_encabezado'

Aquí pueden haber enlaces:

Carlitox en la Web

Contacto

Trabajos (portafolio)

Java

También puede ser un párrafo

Probando jQuery, esto es un párrafo
de unas 4 líneas para probar la
funcionalidad del efecto acordeón
utilizando esta librería.

¿Y porqué no imagenes?

   Con la opción "autoheight: false" elegimos si el acordeón se ajustara al tamaño del párrafo o "div" mas grande de forma automática o no, por ejemplo:

jQuery('#mi_id').accordion({
    header: 'mi_encabezado',
    autoheight: false 
});

Aquí pueden haber enlaces:

Carlitox en la Web

Contacto

Trabajos (portafolio)

Java

También puede ser un párrafo

Probando jQuery, esto es un párrafo
de unas 4 líneas para probar la
funcionalidad del efecto acordeón
utilizando esta librería.

¿Y porqué no imagenes?

   También tenemos con efecto hover:

jQuery('#mi_id').accordion({ 
    active: false, 
    header: 'mi_encabezado', 
    navigation: true, 
    event: 'mouseover', 
    fillSpace: true, 
    animated: 'easeslide' 
});

• 
  

  Mis enlaces 1

  • Enlace 1
  • Enlace 2
  • Enlace 3
• 
  

  Mis imágenes

  • 
  • 
  • 
• 
  

  O incluso un párrafo

  • Probando jQuery, esto es un párrafo
    de unas 4 líneas para probar la
    funcionalidad del efecto acordeón
    utilizando esta librería.

   O podemos utilizar el anterior pero agregándole una animación al llegar al final y un color para un mejor acabado:

jQuery('#mi_id').accordion({
    event: 'mouseover', 
    active: '.selected', 
    selectedClass: 'active', 
    animated: "bounceslide", 
    header: "mi_encabeza" 
}).bind("change.ui-accordion", function(event, ui) { 
    jQuery('
' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown
');

Color 1

Con color HTML.

Color 2

Con color hexadecimal.

Color 3

Hasta gradientes.

Parte 2

Recibe notificaciones por correo