Basiert auf diesem Contao Originaltemplate (4.9.x):
j_accordion.html5
Kurzbeschreibung:
Mit Hilfe der CSS-Klasse accordion_closed kann erreicht werden das das Accordion geschlossen angezeigt wird.
Dazu das Template im Ordner Templates anlegen und entsprechend modifizieren.
Im Element Akkordeon (Umschlag Anfang) in das Feld für die CSS Klasse accordion _closed eintragen.
Bildschirmfoto 2022-07-22 um 10.14.57.png
Da ich das Template nicht als Anhang hochladen kann, hier als Quelltext.
HTML-Code:
<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
jQuery(function($) {
var options = {
heightStyle: 'content',
header: '.toggler',
collapsible: true,
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);
}
}
if ($(".ce_accordion.accordion_closed").length > 0) {
options.active = false;
}
$(document).accordion(options);
});
</script>