contao4 Accordeons verschachteln

ich möchte Accordeons verschachteln

Artikel mit
Umschlag Anfang
Accordeon Einzelelemente
Accordeon Einzelelemente
Accordeon Einzelelemente
Umschlag Ende

Artikel mit
Umschlag Anfang
Accordeon Einzelelemente
Accordeon Einzelelemente
Accordeon Einzelelemente
Umschlag Ende


wenn ich jetzt ein Accordeon Einzelelement öffnen willl, scließt der darüberliegende Umschlag . Ich nehme an an ich muß demn Einzelelmenten eine eigenen Klasse geben und das template j_accordeon dann ändern...
...doch wie ? .. kenn mich mit jquery nicht aus , kann mir da jemand helfen ?


<script src="<?= TL_ASSETS_URL ?>assets/jquery-ui/js/jquery-ui.min.js"></script>
<script>
jQuery(function($) {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: '.toggler',
collapsible: true,
active: false,
create: function(event, ui) {
ui.header.addClass('active');
$('.toggler').attr('tabindex', 0);
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('.toggler').attr('tabindex', 0);
}
});
});
</script>

wenn ich dem Einzelelement die Klassen subAccordion und toggler2 gebe
und das Template j _accordion wie folgt ändere , müßte es ja theoretisch gehen ?


<script src="<?= TL_ASSETS_URL ?>assets/jquery-ui/js/jquery-ui.min.js"></script>
<script>
jQuery(function($) {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: '.toggler',
collapsible: true,
active: false,
create: function(event, ui) {
ui.header.addClass('active');
$('.toggler').attr('tabindex', 0);
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('.toggler').attr('tabindex', 0);
}
});

$(".subAccordion").accordion({
// Put custom options here
heightStyle: 'content',
header: '.toggler2',
collapsible: true,
active: false,
create: function(event, ui) {
ui.header.addClass('active');
$('.toggler2').attr('tabindex', 0);
},

activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('.toggler2').attr('tabindex', 0);
}
});
});
</script>

Nachdem ich auf keinen grünen Zweig komme habe ich dank eines anderen Beitrags im Forum das Problem anders gelöst und lasse jetzt alle geöffneten accordeons offen, außer man schliesst sie manuell
https://community.contao.org/de/show...kt-gel%C3%B6st

Vielleicht hat jemand aber trotzdem eine Idee zum eigentlichen Problem ?

Hallo,

ein accordion ist streng genommen per Definition ein Element, das immer nur ein offenes Unterelement hat.
Dazu gibt es noch collapsible-Elemente, deren Unterelemente unabhängig vom Zustand der anderen Unterelemente offen oder geschlossen sein können.
Möglicherweise ist es sinnvoll, hier ein eigenes j_template.html5 (j_collapsible.html5 z.B.) anzulegen und ebenso ein dazugehöriges Content-Element.

Vielleicht hilft Dir das hier weiter:
https://www.w3schools.com/howto/howt...ollapsible.asp

LG
Hella

Edit: Geht auch mit reinem CSS: https://alligator.io/css/collapsible/

Zitat:

---

Zitat von tamague

wenn ich jetzt ein Accordeon Einzelelement öffnen willl, scließt der darüberliegende Umschlag

---

Ich muss gestehen, ich habe dein Ziel noch nicht wirklich erkannt.
Soll beim Öffnen eines zweiten Einzelelementes das vorherige offen bleiben oder sich alle anderen auch öffnen?

Was genau meinst du mit "verschachtelt"? Denn so wie du beschreibst, sind es ja nur zwei Accordion-Elemente, die du hier anlegst ...

Hallo
Ich habe mehere Artikel mit jeweils einen Accordeon Umschlag zu einem Thema ( 1. Ebene)
darin befinden sich Accordeon Einzelelemente ( 2. Ebene)
wenn ich versuche nach dem öffnen des Elementes 1. Ebeines dieser Accordeon Einzelelemente in der 2. Ebene) zu öffnen schließt der Umschlag der 1. Ebene

Momentan habe ich es so gelöst, daß halt alle geöffneten Element offen bleiben, (aktuell: https://www.sis-tech.at/produkte.html)

...bis ich oder jemand anderer ;-) eine Lösung gefunden hat

durch diesen Zusatz in der j_accordion.html5 nach dem code active: false

HTML-Code:

---

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

---