¿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
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
$(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] );