Hmm... es funktioniert jetzt zwar, allerdings bindest Du nun den Skript-Code für das Akkordeon doppelt ein:
HTML-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
new Accordion($$('div.toggler'), $$('div.accordion'),
{
display: false,
alwaysHide: true,
opacity: false,
onActive: function(toggler, i)
{
toggler.getFirst() ? toggler.getFirst().setStyle('color', '#000000') : toggler.setStyle('color', '#000000');
},
onBackground: function(toggler, i)
{
toggler.getFirst() ? toggler.getFirst().setStyle('color', '#a84204') : toggler.setStyle('color', '#a84204');
}
});
});
//--><!]]>
</script>
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function() {
new Accordion($$('div.toggler'), $$('div.accordion'), {
display: -1,
opacity: false,
alwaysHide: true,
onActive: function(toggler, elem) {
elem.setProperty('aria-hidden', 'false');
toggler.addClass('active');
toggler.getNext('div').setStyle('visibility', 'visible').fade('in');
toggler.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(toggler, elem) {
elem.setProperty('aria-hidden', 'true');
toggler.removeClass('active');
toggler.getNext('div').fade('out').setStyle('visibility', 'hidden');
toggler.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(elem) {
elem.setProperty('role', 'tab');
elem.setProperty('tabindex', 0);
elem.addEvents({
'keypress': function(event) {
if (event.code == 13) {
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(elem) {
elem.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(elem) {
elem.setProperty('role', 'tabpanel');
});
});
/* ]]> */
</script>
Das erste Skript-Element bräuchtest Du nicht. Letzteres ist der Code aus dem Standard-Template von Contao, angepasst und ergänzt um den display: -1 Parameter.