複数のパネルを一度に拡張できるアコーディオンを作成しようとしています。私はそれをjQuery UI APIで見つけようとしましたが、まだ適切な方法を見つけていません。
JQuery UIアコーディオンを使用してこれを行う方法があるかどうかをお知らせください。
他の人が指摘したように、Accordion
ウィジェットには、これを直接実行するためのAPIオプションがありません。ただし、ウィジェットを使用する必要がある場合は、 beforeActivate
イベントハンドラーオプションを使用して、これを覆し、エミュレートすることで、これを実現できます。ウィジェットのデフォルトの動作。
例えば:
$('#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
}
});
複数のアコーディオンを重ねて記述でき、各アコーディオンにはパネルが1つだけあります。このようにして、パネルを個別に切り替えることができます。
アコーディオンは、定義上、特定の方法で切り替わる拡張要素のセットです。あなたはそれを望まない。エキスパンド要素のセットが必要なだけです。 jQueryでそれを構築するのは非常に簡単です。多くの場合、これ以外には何も必要ありません。
$('.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>