ejemplos - jquery accordion from scratch
Acordeón jQuery UI: abre múltiples paneles a la vez (3)
Puede escribir varios acordeones que estén apilados y cada acordeón tenga solo un panel. De esta forma, los paneles podrían ser cambiados individualmente.
Intento crear un acordeón capaz de expandir múltiples paneles a la vez. Intenté encontrarlo en la API de jQuery UI, pero aún no he encontrado la forma adecuada.
Por favor, avíseme si hay una manera de hacerlo usando el acordeón de jQuery UI.
Un acordeón es, por definición, un conjunto de elementos en expansión que se alternan de cierta manera. No quieres eso. Solo quieres un conjunto de elementos en expansión. Es extremadamente fácil construir eso con jQuery. A menudo no necesita nada más que esto:
$(''.my-heading-class'').on(''click'', function() {
$(this).next(''.my-content-class'').slideToggle();
});
<div class="my-heading-class">My Heading</div>
<div class="my-content-class">My Content</div>
Como otros han notado, el widget Accordion no tiene una opción de API para hacer esto directamente. Sin embargo, si debe usar el widget, es posible lograrlo utilizando la opción beforeActivate event handler para subvertir y emular el comportamiento predeterminado del widget.
Por ejemplo:
$(''#accordion'').accordion({
collapsible:true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next(''.ui-accordion-content'');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next(''.ui-accordion-content'');
}
// Since we''ve changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr(''aria-selected'') == ''true'';
// Toggle the panel''s header
currHeader.toggleClass(''ui-corner-all'',isPanelSelected).toggleClass(''accordion-header-active ui-state-active ui-corner-top'',!isPanelSelected).attr(''aria-selected'',((!isPanelSelected).toString()));
// Toggle the panel''s icon
currHeader.children(''.ui-icon'').toggleClass(''ui-icon-triangle-1-e'',isPanelSelected).toggleClass(''ui-icon-triangle-1-s'',!isPanelSelected);
// Toggle the panel''s content
currContent.toggleClass(''accordion-content-active'',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});