contao accordeon jquery - vorheriges offen bleiben, wenn man nächstes anklickt-gelöst
liebe contaoleute,
diesmal eine ganz andere frage zum accordeon:
am anfang sollen alle geschlossen sein (die übliche frage).
bei klick auf den pfeil aufgehen, klar.
aber wenn man den nächsten toggler anklickt soll der alte NICHT automatisch schliessen, sondern offen bleiben.
am bester wäre es er schließt nur, wenn man den toggler manuell anklickt.
den kunden stört nämlich das hektische hin- und herscrollen beim öffnen und (automatischen) schließen.
hier der normale code:
<script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'] ?>/jquery-ui.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: 'div.toggler',
collapsible: true,
active: true,
create: function(event, ui) {
ui.header.addClass('active');
$('div.toggler').attr('tabindex', 0);
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('div.toggler').attr('tabindex', 0);
}
});
});
})(jQuery);
</script>
vielen dank für etwaige hilfe,
oliver grosche
ich habs selbst rausgefunden
man muss einfach in der j_accordion.html5 nach dem active: false folgenden code einfügen:
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; // Cancels the default action
},
gefunden auf http://stackoverflow.com/questions/3...-sections-open