ejemplos - Jquery Accordion Cerrar luego Abrir

jquery accordion collapse

Question

He configurado una serie de acordeones en una página utilizando el complemento jquery accordion para que pueda implementar expandir todo y contraer toda la funcionalidad.

Cada elemento ID es su propio acordeón y el código siguiente funciona para cerrarlos, independientemente de cuáles estén abiertos:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata")
    .accordion("activate", -1)
;

Mi problema es con expandir todo. Cuando los tengo todos se expanden con este código:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata")
    .accordion("activate", 0)
;

Algunos se contratarán y otros se expandirán en función de si están o no abiertos anteriormente.

Mi idea para corregir esto fue colapsarlos todos y luego expandirlos todos cuando se hizo clic en expandir todo. Sin embargo, este código no se ejecutará correctamente:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata")
    .accordion("activate", -1)
;
$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata")
    .accordion("activate", 0)
; 

Solo tocará el segundo comando y no los cerrará todos primero. ¿Alguna sugerencia?

Answer 1

No estoy exactamente seguro de lo que buscas, pero esta es mi mejor suposición. De todos sus acordeones, desea que el botón "abrir todo" abra todos los acordeones que estén cerrados (es decir, no se muestra ninguna sección). Lo haría usando filter()

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata")
    .filter(":not(:has(.selected))")
    .accordion("activate", 0)
;

¿Es eso lo que estabas buscando?

Edite para explicar esa función de filtro:

La función de filtro solo ejecuta su selección actual a través de un filtro, eliminando todo lo que no coincida. Tiene dos formas diferentes: una donde pasa una consulta jQuery regular, como hice anteriormente, y la otra donde puede definir una función para filtrar. Si la función devuelve falso, entonces ese elemento se elimina.

En este caso, la consulta elimina todo lo que no tiene ( :not ) tener ( :has ) un elemento secundario con clase "seleccionada" ( .selected ). .selected selector .selected aquí porque eso es lo que el acordeón agrega al panel abierto actualmente.

Si solo tenía un acordeón o le daba a cada uno de sus acordeones algún tipo de identificador, como el nombre de una clase, entonces podría reducir mucho el guión completo. Digamos que para cada elemento que desea convertir en acordeón, le da la clase "acuerdo".

$(".accord:not(:has(.selected))").accordion("activate", 0);

Esto es mucho más legible y mantenible, ya que puede agregar fácilmente más acordeones en el futuro si lo desea y esto lo manejará.

La documentación para el filtro está aquí: http://docs.jquery.com/Traversing/filter

Answer 2

Tuve el mismo problema y lo resolví con un código corto aprovechando la función cada () de JQuery para colapsar mientras establezco el foco en el elemento [0] para que la navegación normal pueda reanudarse.

http://spstring.jeffthink.com/?p=49

Answer 3

jQuery(''#accordion'').accordion({        
    active:-1,
});