Accordion als Artikel mehrfach auf einer Seite einbinden - 1. Element offen

[StR]

Hallo zusammen,

ich habe folgendes Szenario:
Auf einer Seite wird an 2 Stellen ein Accordion als Inhaltselement "Artikel" eingefügt. Also quasi als Referenz.
Das funktioniert soweit auch wunderbar.
Jetzt möchte ich gerne, dass immer das erste Element offen ist und man nie alle Tabs schließen kann.
Letzteres verhindert die Angabe

alwaysHide: false

. Soweit perfekt.

Normalerweise sollte die Option

display: 0

das erste Element öffnen.
Auch das funktioniert eigentlich. Jedoch leider nur beim ersten Accordion was auf der Seite vorkommt.
Beim 2. Accordion, welches ja eigentlich nur ein Klon des 1. ist funktioniert es leider nicht. :-(

Weiß jemand Rat?

[joe]

Das liegt daran das die Accordions nicht gruppiert werden. Wenn ich das richtig verstanden habe hast du 2 Accordion Gruppen und möchtest das jeweils das erste Element je Gruppe offen ist.

Du musst auf jeden fall dann dein moo_accordion template anpassen und den Artikel jeweils eine class accordiongroup geben.

Wenn du das Accordion Template wie folgt modifizierst sollte das gehen:

<script type="text/javascript">
/* <![CDATA[ */
(function($) {
  window.addEvent('domready', function() {
    $$('.accordiongroup').each(function(el) {
	    var accordion = new Accordion(el.getElements('.toggler'), el.getElements('.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');
    });
  });
})(document.id);
/* ]]> */
</script>

[Mark Knochen]

Mh, das modifizierte Accordion-Template greift nicht, obwohl zwei Artikel jeweils die Klasse .accordiongroup bekommen haben.
In beiden Artikeln sind die Accordionelemente alle offen und nicht klickbar.


Mark

[Mark Knochen]

Ich schieb das nochmal nach oben - hat jemand noch einen Tipp für mehrere Accordion-Gruppen auf einer Seite?

Danke

Mark

[mikado]

Stehe auch gerade vor dem Problem auf einer Seite zwei Accordions zu beherbergen. Bei Ersten soll immer nur ein Element offen sein. Beim Zweiten aber mehrere.

Ich denke joe meinte, dass jedes accordion eine eigene Klasse (besser wohl ID) braucht. Diese kann man dann im moo_accordion seinen Bedürfnissen anpassen. Im Prinzip kann es auch nur so funktionieren. Habe beide Accordions die selbe Klasse, woher soll mootools dann wissen, welches geöffnet wurde oder offen sein soll? Probiere das gleich mal aus...