Verschachtelte Akkordeons mit Contao 3.1

[die onleister]

Hallo Community,

ich habe bei einigen Projekten verschachtelte Akkordeons im Einsatz und habe es bisher mit der Anleitung im Wiki (http://de.contaowiki.org/Akkordeons_verschachteln) gut gelöst. Nach dem Update auf 3.1 funktionierten meine verschachteleten Akkordeons leider nicht mehr. Grund waren die geänderten Templates bzw. Java-Script-Aufrufe.

Daher habe ich das Template aus dem Wiki ein wenig umgeschrieben:

<script>
    (function($) {
        window.addEvent('domready', function() {
            var heightValue = window.ie6 ? '100%' : '';
            var cookieBase = $$('div.toggler')[0] ?
                'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id') : 'acc_x';
            var maybeScroll = Cookie.read(cookieBase + '_inner') ? 'inner' :
                              Cookie.read(cookieBase + '_outer') ? 'outer' : false;

            this.accordion_outer = new Fx.Accordion($$('div.toggler_outer'), $$('div.accordion_outer'), {
                opacity: true,
                alwaysHide: true,
                display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : 0,

                onActive: function(toggler, element)
                {
                    toggler.addClass('active');
                    toggler.removeClass('inactive');
                    if (toggler.getFirst()) {
                        toggler.getFirst().addClass('active');
                        toggler.getFirst().removeClass('inactive');
                    }
                },

                onBackground: function(toggler, element)
                {
                    toggler.removeClass('active');
                    toggler.addClass('inactive');
                    if (toggler.getFirst()) {
                        toggler.getFirst().removeClass('active');
                        toggler.getFirst().addClass('inactive')
                    }
                },

                onComplete: function()
                {
                    var element = $(this.elements[this.previous]);
                    if (element && element.offsetHeight > 0)
                    {
                        element.setStyle('height', heightValue);
                    }
                    Cookie.dispose(cookieBase + '_outer');
                    var toggler = this.togglers[this.previous];
                    if (element && toggler && toggler.hasClass('active'))
                    {
                        Cookie.write(cookieBase + '_outer', this.previous);
                        if (maybeScroll == 'outer')
                        {
                            maybeScroll = false;

                            var wc = {top: window.getScroll().y, height: window.getSize().y};
                            var tc = toggler.getCoordinates();
                            var ec = element.getCoordinates();
                            var sc =
                            {
                                top:    Math.max(0, tc.top - 20),
                                height: Math.min(tc.height + ec.height + 40, wc.height)
                            };
                            if (sc.top < wc.top)
                            {
                                new Fx.Scroll($(document.body)).start(0, sc.top);
                            }
                            else if (sc.top + sc.height > wc.top + wc.height)
                            {
                                new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);
                            }
                        }
                    }
                }
            });

            this.accordion = new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
                opacity: true,
                alwaysHide: true,
                display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,

                onActive: function(toggler, element)
                {
                    toggler.addClass('active');
                    toggler.removeClass('inactive');
                    if (toggler.getFirst()) {
                        toggler.getFirst().addClass('active');
                        toggler.getFirst().removeClass('inactive');
                    }
                },

                onBackground: function(toggler, element)
                {
                    toggler.removeClass('active');
                    toggler.addClass('inactive');
                    if (toggler.getFirst()) {
                        toggler.getFirst().removeClass('active');
                        toggler.getFirst().addClass('inactive')
                    }
                },

                onComplete: function()
                {
                    var element = $(this.elements[this.previous]);
                    if (element && element.offsetHeight > 0)
                    {
                        element.setStyle('height', heightValue);
                    }
                    Cookie.dispose(cookieBase + '_inner');
                    var toggler = this.togglers[this.previous];
                    if (element && toggler && toggler.hasClass('active'))
                    {
                        Cookie.write(cookieBase + '_inner', this.previous);
                        if (maybeScroll == 'inner')
                        {
                            maybeScroll = false;

                            var wc = {top: window.getScroll().y, height: window.getSize().y};
                            var tc = toggler.getCoordinates();
                            var ec = element.getCoordinates();
                            var sc =
                            {
                                top:    Math.max(0, tc.top - 20),
                                height: Math.min(tc.height + ec.height + 40, wc.height)
                            };
                            if (sc.top < wc.top)
                            {
                                new Fx.Scroll($(document.body)).start(0, sc.top);
                            }
                            else if (sc.top + sc.height > wc.top + wc.height)
                            {
                                new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);
                            }
                        }
                    }
                }
            });
        });
    })(document.id);
</script>

Damit funktionieren die verschachtelten Akkordeons auch wieder unter Contao 3.1. Außerdem habe ich mir gleich die Cookie-Sache mit eingebaut. So merkt sich Contao mit Hilfe von Cookies welches Akkordeon wie geöffnet war. Alles wunderbar!

Viel Spaß damit
Sebastian

[spacefront]

Hallo

ist zwar schon ein bisschen her aber schreib es doch ins Wiki

Gruß

[Verena]

Hallo zusammen,

hat jemand die Verschachtelung schon in Contao 4.x ausprobiert bzw. angepasst?
Ich komme hier nicht wirklich weiter.

Grüße
Verena