Sencillo acordeón con JQuery

Este interesante acordeón hecho con JQuery es ideal para cuando necesitamos armar un menú en nuestro sitio, a continuación los pasos para aplicarlo:

1.- incluimos el estilo y las librerías necesarias (antes de </head>):

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"/> 

2.- seguidamente hacemos el llamado a la función accordion() con jQuery:

<script>
   // ejecutara la función cuando la página termine de cargar
  $(document).ready(function() {
      $("#idacordeon").accordion();// iniciamos el acordeon
  });
  </script>

3.- en el cuerpo de la página armamos el menú:

Clic aquí para mostrar u ocultar la lista

<div id="idacordeon" style="font-size:62.5%;">
    <h3><a href="#">Item 1</a></h3>
    <div>
        <p>contenido ..</p>
    </div>
    <h3><a href="#">Item 2</a></h3>
    <div>
        <p>contenido ..</p>
    </div>
    <h3><a href="#">Item 3</a></h3>
    <div>
        <p>Sub-menu ..</p>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
    </div>
    <h3><a href="#">Item 4</a></h3>
    <div>
        <p>Contenido ..</p>
    </div>
</div>

Así de sencillo..

descargar

---

Opciones principales:

(clic para mostrar/ocultar)

disabled
- Deshabilitando el acordeon: con una sola linea podemos conseguirlo.

$( "#idacordeon" ).accordion({ disabled: true });

Le dará el efecto de menú deshabilitado (opacidad baja), pero lo sigue mostrando.

active
- Desplegando un item por defecto: podemos indicar que item aparecerá desplegado por defecto

$( "#idacordeon" ).accordion({ active: 3 }); // activamos el item 4

Hay que tomar en consideración que cada uno tiene un index y que el primero parte de cero, lo que significa, que la línea anterior desplegará por default al item 4..

animated
-por defecto usa el efecto slide, requiere la extensión UI Effects Core.

$("#idacordeon").accordion({ animated: 'bounceslide' });

no autoHeight
- controla el alto de los items, su valor por defecto es true, si lo seteamos a false evitara que se aplique un valor height similar para todos los items del acordeón.

$("#idacordeon").accordion({ autoHeight: false });

fillSpace
- si su valor es true, establece que el ancho de cada item debe ser igual al primero y de albergar contenido que supere la altura de ese, agregara un scrolbar vertical a los items que lo requieran.

$("#idacordeon").accordion({ fillSpace: true });

collapsible
- esta opción permite indicar que deseamos que los puedan expandirse o contraerse con un solo click, por defecto es false.

$("#idacordeon").accordion({ collapsible: true });

icons
- podemos indicar que iconos se mostraran para cuando los items están contraídos o cuando están expandidos.

$("#idacordeon").accordion({ 
  icons: { 
     'header': 'ui-icon-plus', /* icono item contraido */
     'headerSelected': 'ui-icon-minus' /* icono item expandido */
  } 
});

Podemos asignar cualquiera de los iconos que aparecen acá.

event
- permite establecer que evento permitirá la navegación entre items.

$("#idacordeon").accordion({ event: "mouseover" });

mousover permite que el contenido de los items se muestren al pasar el mouse sobre ellos.

---

Eventos:

create
- se dispara cuando se crea el acordeón, podemos hacer uso de alguna método anónimo para que se ejecute algún proceso..

$("#idacordeon").accordion({ 
   create: function(event, ui) { alert('bienvenido a cassianet!'); }
});

change
- este se dispara al cambiar entre items.

$("#idacordeon").accordion({ 
   change: function(event, ui) { alert('Ha habido un cambio!'); }
});

changestart
- este evento se dispara antes de que el acordeón cambie de items.

$("#idacordeon").accordion({ 
   change: function(event, ui) { alert('hacemos un cambio ..'); }
});

---

Referencia:
jquery.com