Verschachtelte Akkordeons mit Contao 3.1

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:

Code:

---

<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

Hallo

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

Gruß

Hallo zusammen,

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

Grüße
Verena