Mehrere Accordions geöffnet

[Martin L.]

Hallo,

ich habe einen Onepager mit mehreren Accordions.

Die Accordions beeinflussen sich gegenseitig, d.h. wenn ich bei Accordion B einen Bereich öffne, geht bei Accordion A und C alles zu.

Es sollen aber A, B und C unabhängig voneinander agieren.
Es soll bei allen Accordions im Grundzustand der erste Bereich geöffnet sein.

Genau so:

http://jsfiddle.net/VeWVS/

Als javascript ist dort nur angegeben:

window.addEvent('domready', function(){
	new Fx.Accordion($('accordion1'), '#accordion1 h2', '#accordion1 .content');
    new Fx.Accordion($('accordion2'), '#accordion2 h2', '#accordion2 .content');
});

Das moo_accordion.html5 sieht so aus:

  <script>
  (function() {
    window.addEvent('domready', function() {


      new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
        opacity: 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) {
              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>

Wie bekomme ich wohl obigen Javascript vom jsfiddle in das moo_accordion.html5 integriert?
Ich kenne mich leider nicht aus mit javascript.

Ich habe schon alles mögliche probiert, komme aber einfach nicht weiter, und es ist auch ein bisschen dringend.

[Martin L.]

Hier noch ein link zu der Seite: http://www.zahnarztpraxis-hasehaus.de
Hat jemand eine Idee? Oder habe ich nicht verständlich ausgedrückt, was ich möchte?

[joe]

Wenn ich dich richtig verstanden habe sollte das hier funktionieren:

<script>
    (function() {
        window.addEvent('domready', function() {

            document.getElements('li .wrapper').each(function(el) {

                new Fx.Accordion(el.getElements('div.toggler'), el.getElements('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) {
                                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>

[Martin L.]

Hey Joe,
das war’s! Danke! Hast mich richtig verstanden!
Für die Desktop-Version habe ich noch zu

display: 0,

geändert, so sind alle ersten Abteilungen geöffnet;
das template habe ich dann kopiert, es "moo_accordion_closed" genannt, dort wieder

display: false,

eingefügt und im mobile-Layout ausgewählt.
So sind im mobile-Browser alle Accordions bei Aufruf geschlossen (platzsparend).
Dank und Gruß, Martin