Contao-Akkordeons (MooTools) geschlossen darstellen nach dem Seitenladen

von Oliver Richter

Wie lassen sich die Contao-Akkordeons (MooTools) geschlossen darstellen nach dem Seitenladen? Diese Anpassung soll updatesicher sein...

Dazu wählen Sie erst ein mal wie gewohnt im jeweiligen Seitenlayout (Themes) ein entsprechendes Mootools-Template z.B. "moo_accordion" aus.
Nun wechseln Sie in ein FTP-Programm (z.B. Filezilla) und kopieren diese Template-Datei "moo_accordion" aus /system/modules/frontend/templates (Contao 2) oder /system/modules/core/templates (Contao 3) direkt in Ihren /templates/ -Ordner (sollten Sie einen Projekt-Unterordner verwenden, dann natürlich dorthin /templates/unterordner/). Dann bearbeiten Sie die kopierte Datei mit einem Texteditor. Die ersten Zeilen sollten wie folgt aussehen:

 

<script type="text/javascript">
/* <![CDATA[ */
(function($) {
  window.addEvent('domready', function() {
    new Accordion($$('.toggler'), $$('div.accordion'), {
      opacity: false,
      alwaysHide: true,
      onActive: function(tog, el) {

 

Nun fügen Sie unterhalb der Zeile von "alwaysHide: true," noch die folgende Codeschnipsel hinzu

"display: -1,"

Der Code sollte dann so aussehen (es ist wieder nur der oberste Ausschnitt zu sehen, der Codebereich ist im Original noch länger):

 

<script type="text/javascript">
/* <![CDATA[ */
(function($) {
  window.addEvent('domready', function() {
    new Accordion($$('.toggler'), $$('div.accordion'), {
      opacity: false,
      alwaysHide: true,
      display: -1,
      onActive: function(tog, el) {

 

Das war's!

 

Kommentare

Kommentar von aadursun |

Ich habe das html5 & xhtml template geändert; cache geleert; aber es funktioniert nicht, dennoch wird das 1. Accordion immer angezeigt.

Kann es daran liegen, dass ich Jquery und Mootools gleichzeitig unter Contao 3.1.5 verwende; oder hat das damit wenig zu tun?

Gruß
aadursun

Antwort von Oliver Richter

Hallo aadursun

Du verwendest JQuery und MooTools gleichzeitig - hast du also beide Templates angepasst? Unabhängig von dem Akkordeon-Problem würde ich dir empfehlen, nur ein Javascript-Framework einzusetzen, wenn nur irgendwie möglich.

Zun den Akkordeons: Gibt es einen Javascript-Fehler? Sofern du JQuery einsetzt, probiere es mal mit folgendem Code-schnipsel für das Template j_accordion.html5. Der Code hat sich etwas verändert und mein obiges Beispiel passt nicht mehr so ganz.
Wichtig ist das "active: false".

[lt]script src="[lt]?php echo TL_ASSETS_URL; ?[gt]assets/jquery/ui/[lt]?php echo JQUERY_UI; ?[gt]/jquery-ui.min.js"[gt][lt]/script[gt]
[lt]script[gt]
[nbsp] (function($) {
[nbsp][nbsp][nbsp] $(document).ready(function() {
[nbsp][nbsp][nbsp][nbsp][nbsp] $(document).accordion({
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] // Put custom options here
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] heightStyle: 'content',
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] header: 'div.toggler',
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] collapsible: true,
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] active: false
[nbsp][nbsp][nbsp][nbsp][nbsp] });
[nbsp][nbsp][nbsp][nbsp][nbsp] var activate = function(tog) {
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] var tgs = $('div.toggler');
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] tgs.removeClass('active');
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] tog.addClass('active');
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] tgs.next('div.accordion').attr('aria-hidden', 'true');
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] tog.next('div.accordion').attr('aria-hidden', 'false');
[nbsp][nbsp][nbsp][nbsp][nbsp] };
[nbsp][nbsp][nbsp][nbsp][nbsp] $('div.toggler').focus(function() {
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] $('div.toggler').attr('tabindex', 0);
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] $(this).attr('tabindex', -1);
[nbsp][nbsp][nbsp][nbsp][nbsp] }).blur(function() {
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] $(this).attr('tabindex', 0);
[nbsp][nbsp][nbsp][nbsp][nbsp] }).click(function() {
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] activate($(this));
[nbsp][nbsp][nbsp][nbsp][nbsp] }).keypress(function(event) {
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp] if (event.keyCode == 13) activate($(this));
[nbsp][nbsp][nbsp][nbsp][nbsp] });
[nbsp][nbsp][nbsp] });
[nbsp] })(jQuery);
[lt]/script[gt]

[nbsp]

[nbsp]

Kommentar von Thomas Krist |

Super, vielen Dank. Funktioniert sehr gut.

Einen Kommentar schreiben

Bitte addieren Sie 6 und 4.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.