Contao-Akkordeons (MooTools) geschlossen darstellen nach dem Seitenladen

von Oliver Richter (Kommentare: 2)

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!

 

Zurück

Einen Kommentar schreiben

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".

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo 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
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function() {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
    });
  })(jQuery);
</script>

 

 

Kommentar von Thomas Krist |

Super, vielen Dank. Funktioniert sehr gut.

Bitte rechnen Sie 3 plus 3.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

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