Akkordeon mit Elementyp "Umschlag Anfang - Ende" springt bei Klick nicht auf Anfang

[ewaldo]

Liebe Contao Gemeinde!

Wohl wissend, dass diese Frage oder Problem wahrscheinlich schon so alt ist wie Contao selbst, habe ich mir heute fast die Augen wund gelesen (Forum und Contao Google Suche) und habe die Lösung, falls es den überhaupt eine gibt, einfach nicht gefunden.

Ich möchte mich kurz fassen: Ich habe nach mehrjähriger Pause nun wieder ein kleines Projekt mit mit Contao 3.5.12 erstellt. Die Seite ist bereits online unter: http://www.icon-bau.at erreichbar, was das ganze vielleicht etwas leichter macht.

Unter Projekte gibt es derzeit 4 Kategorien eine davon ist: http://www.icon-bau.at/erd-und-strassenbau.html

Ich habe für mich und den Kunden die Auflistung der BVH mit Akkordeons bewerkstelligt, was auch tadellos gelungen ist. Es gibt leider nur einen Wehrmutstropfen, dass beim Aufklappen des nächsten Akkordeons dieses nicht an den Anfang springt, sondern wie ersichtlich, am untere Ende bleibt und man nach oben scrollen muss.

Das Template moo_accordion.html5 ist ordnungsgemäß ins Seitenlayout eingebunden:

<script>
  (function() {
    window.addEvent('domready', function() {
      new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
        opacity: false,
        display: false,
        alwaysHide: true,
        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>

und hat das Öffnen des ersten Akkordeon durch einfügen der Zeile: display: false, auch unterdrückt.

Wie könnte man nun das Problem lösen, damit beim Öffnen des nächsten Akkordeons dieses sich am Anfang positioniert?

Vielen Dank für eine möglichen Lösungsweg!

Grüße ewaldo

[Andreas]

Vorweg, du solltest versuchen dich für jQuery oder MooTools zu entscheiden. Die Bibliotheken (jQuery, MooTools) solltest du lokal laden. Die jQuery-Scripts solltest du alle mit dem Wrapper

(function($) {
  // ...
})(jQuery); 

versehen (da sind Fehlermeldungen). Entscheide dich für eine Lightbox, nicht colorbox und mediabox gleichzeitig.

Versuche mal das Scrollen mit dem onComplete des Accordions anzustoßen (ungetestet)

// MooTools
var myFx = new Fx.Scroll(window);

//...
onComplete: function(tog, el){
  myFx.toElement(tog);
}
// ... 

[ewaldo]

Hallo Andreas!

Vorerst mal recht herzlichen Dank für die schnelle Antwort. Da ich leider mit jQuery und den anderen Scriptsprachen noch sehr wenig Erfahrung habe, möchte ich es dennoch zur Sicherheit am lokalen Rechner versuchen. Den ersten Schritt mit der Trennung in den Seitenlayouts von jQuery und MooTools Akkordeon habe ich mal erledigt, wobei ich mich für das MooTool-Akkerdeon entschieden habe. Für Lightbox hab ich colorbox aktiviert. Ebenso habe ich alles lokal geladen.

zu Tipp 1)
um welche jQuery Scripts handelt es sich bei alle? Alle die im Installationsverzeichnis von Contao liegen oder die vom Template?

zu Tipp 2) der Versuch mit onComplete wäre demnach im Anhang meiner Datei zu bewerkstelligen? Aber wo platziere ich hier die Variable und die Zeile onComplete?

Tut mir leid, dass ich diese laienhaften Fragen stelle, aber einen Versuch möchte ich wagen.

Gruß ewaldo

[Andreas]

Zu 1: Halte Ausschau nach JS-Fehlern in den Dev-Tools des Browsers (Konsole). Ein Blick auf den Quelltext hilft auch. Die Scripts, welche ziemlich weit unten eingebunden werden.

Zu 2: Die Variable kannst du irgendwo oben im Script deklarieren. Das onComplete dahin, wo auch onActive ist. Achtung, die letzte Option hat hinten kein Komma.

// JS object
{
  property: value,
  property: value,
  property: value
}