string(13) "art1575904021" Contao Akkordeon geschlossen beim Laden darstellen

Contao Akkordeon geschlossen beim Laden darstellen

Um das Akkordeon in Contao zum Beginn geschlossen darzustellen, ist nur eine kleine Anpassung im Template notwendig. Je nachdem, ob du jQuery oder Mootools verwendest ist folgende Ergänzung im Template notwendig:


jQuery Akkordeon(j_accordion.html5):

Bei der Übergabe der Parameter fügst du folgende Zeile hinzu (ca. Zeile 11):

active: false,

Dein Code sollte danach in etwa so aussehen:

<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: false,
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>

Mootools Akkordeon(moo_accordion.html5):

Bei der Übergabe der Parameter fügst du folgende Zeile hinzu (ca. Zeile 8):

display: -1,

Dein Code sollte danach in etwa so aussehen:


<script>
(function() {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
alwaysHide: true,
display: -1,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13 || event.code == 32) {
this.fireEventå('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})();
</script>

Zuletzt aktualisiert am 30.09.2016 von Dennis.

Zurück