jQuery Accordion expand all div

¿Es posible expandir todos los componentes cuando se carga la página o cuando ocurre un evento? ¡¡Gracias!!

Simplemente usa esto

$('#accordion .ui-accordion-content').show(); 

No, si te refieres al acordeón como indica tu etiqueta. De jQuery.

NOTA: Si desea abrir varias secciones a la vez, no use un acordeón

http://docs.jquery.com/UI/API/1.8/Accordion

Recomendaría este plugin Multi-open Accordion

 // this will make the second tab by default opened (index starts from 0) $('#multiAccordion').multiAccordion({active: 1 }); // [ OR ] // supports multiple tabs to be opened by default $('#multiAccordion').multiAccordion({active: [1, 2, 3] }); // show all tabs $('#multiAccordion').multiAccordion({active: 'all' }); // hide all tabs $('#multiAccordion').multiAccordion({active: 'none' }); // you can set the options as any jQuery UI plugin using option method $('#multiAccordion').multiAccordion('option', 'active', 'all'); 

Me gusta esta implementación de un cuadro de alternar:

http://jsfiddle.net/kevinPHPkevin/mZhTY/107/

 
Toggle 1

text1.

Toggle 2

text2.

Toggle 3

text3

Encontré esto en

No puedo hacer que una pestaña de acordeón de jQuery UI cambie los colores cuando se utiliza (como a: visit), ¿puedo?

Puede hacerlo en el evento document.ready que proporciona jQuery, como este:

CSS:

 .myClassToBeHidden { display: none; } 

jQuery:

 $(function() { $(".myClassToBeHidden").slideDown(); }); 

Si te refieres al control de acordeón de la interfaz de usuario de jQuery, entonces … no deberías usar el acordeón, expandir todo no es para lo que sirve y lo desaconsejan, ya que causa otros problemas.

Para que sea discreto y se oculte solo si el visitante tiene javascript, pondría

CSS:

 #divToBeHidden { display: block; } 

En :

 $('#divToBeHidden').hide(); 

Parte inferior de :

 $(function() { $("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content }); 

Sé que estoy respondiendo a una pregunta de 2 años, pero ninguna de las soluciones alternativas o complementos alternativos de acordeón funcionaron para mí, por lo que se me ocurrió una solución sencillamente devastadora: simplemente destruya el acordeón haciendo clic en un enlace “expandir todo” , y reinicializarlo al hacer clic en un enlace “contraer todo”. Algo como esto:

  

El expandir todo y colapsar todos los enlaces se vería así:

 Expand all | Collapse all 

Lol, hay muchas respuestas aquí, pero la solución más fácil no parece ser. La respuesta es sí y no”. No puede usar el comando “tradicional”, sin embargo, puede usar las “clases” y escribir el JS usted mismo, que es SUPER SIMPLE .

Simplemente haga su propio Acordeón usando las clases de jQueryUI y un poco de JS y estará listo. Es MUY fácil y se mantiene con su ThemeRoller jQueryUI. Si desea las opciones “x-tra” que proporciona el “widget de corrección oficial”, puede administrarlas todas con un poco más de CSS o JS. Realmente no es tan difícil. A continuación se muestra un enlace al ejemplo de trabajo del código que publicaré. Todo lo que hice fue copiar sus clases a mi diseño HTML textualmente. El HTML todavía se presenta como cualquier otro acordeón jQueryUI, excepto que aplicamos las clases manualmente en lugar de dejar que jQuery lo haga. Mira abajo para ver lo que quiero decir.

O, por supuesto, puede obtener este complemento xtra, jquery-theme ready

jsFiddle


El HTML

 

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


El JavaScript

 $(function() { $("#accordion > h3").on("click", function(e) { $(this).next().slideToggle(function(e) { if ($(this).is(":visible")) { $(this).addClass("ui-accordion-content-active") .prev().toggleClass("ui-corner-all ui-corner-top").addClass("ui-accordion-header-active ui-state-active") .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s"); } else { $(this).removeClass("ui-accordion-content-active") .prev().toggleClass("ui-corner-all ui-corner-top").removeClass("ui-accordion-header-active ui-state-active") .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s"); } }); }) .hover(function(e) { $(this).toggleClass("ui-state-hover"); }); }) 

Sé que es muy tarde pero encontré la solución hoy. Simplemente usa

 function expandAll() { $('#accordion h3').removeClass('ui-state-default') .addClass('ui-state-active') .removeClass('ui-corner-all') .addClass('ui-corner-top') .attr('aria-expanded', 'true') .attr('aria-selected', 'true') .attr('tabIndex', 0) .find('span.ui-icon') .removeClass('ui-icon-triangle-1-e') .addClass('ui-icon-triangle-1-s') .closest('h3').next('div') .show();} 

enlace del artículo completo

MultiAccordion jQuery UI plugin es la mejor solución: https://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

Después de agregar la referencia del complemento después de la referencia de jQuery UI, solo necesita hacer 2 cambios simples:

$ (“# accordion_div”). acordeón múltiple (“opción”, “activo”, [0,1] );