Mootools-Accordeon mit Positions-Korrektur

Vor einer Weile gab es mal eine Javascript-Nachfrage im Contao.de-IRC. Dort habe ich für jemanden die Funktion eingebaut das nicht nur beim Klick das darunterliegende Text-Element aufklappt, sondern danach sich dieses Element nach oben an den Browserrand korrigiert. Ähnlich wie ein Anker-Scroller. Da ich es jetzt auch selbst auf meiner mobilen-Version von www.sr-tag.de also m.sr-tag.de einsetzen wollte, hab ich gedacht das könnte eventuell auch jemand anderen interessieren.

Also folgeden Aufruf ans Ende der Website kopieren oder bei Contao im Theme-Seitenlayout-Einstellungen in der textarea von "Eigener JavaScript-Code". Es ist natürlich die Mootools-Bibliothek erforderlich.

<script type="text/javascript">
<!--//--><![CDATA[//><!--
var Accord = { 
    init: function(){
    var Toggler = $$('div.toggler');
    var Accordeon = $$('div.accordion');
    
    this.accordion = new Accordion(Toggler, Accordeon, {
    display: -1,
    alwaysHide: true,
    opacity: 0.1,
    duration: 1000,
    transition: Fx.Transitions.Sine.easeInOut,

    onBackground: function(toggler,i) {
        toggler.removeClass('active');
       },
    
    onActive: function(toggler, i)
        {
        toggler.addClass('active');
        },
    onComplete: function(){

        request = this.previous;
        if(request >=0){
            var open = this.togglers[request].getStyle('margin-top').toInt();
            if(open >= 0) new Fx.Scroll(window,{duration: this.options.duration}).toElement(this.togglers[request]);
        }
    }
  });

}
}
window.addEvent('domready', Accord.init.bind(Accord));
//--><!]]>
</script>

die Elemente "Toogler" und "Accordeon" müssen natürlich bei Abweichung im eigenen HTML-Code angepasst, und die Optionen können nach Belieben verändert werden.

Viel Glück und hier ein etwas angepasstes funktionierendes Beispiel