Akkordeons im Akkordeon

Hi habe folgende Frage.

Ist es Möglich mittels der Standartfunktion Akkordeon diese zu verschachteln?

Also Würde gern Mithilfe der Akkordeons eine Übersicht erstellen die dann So ausschauen soll

1.Hauptpunkt: 1999
Unterpunkte: Ort 1 Ort 2 Ort 3
2. Hauptpunkt 2000
Unterpunkte: Ort 1 Ort 2 Ort3
3. Hauptpunkt 2001

Und halt immer so weiter. Aus Platz Gründen wollte ich mit Akkordeons Arbeiten jedoch stellt sich da das Problem das ein Akkordeon im Akkordeon scheinbar nicht funktioniert.

Vorstellung:

Man Klickt auf 1999 und man findet die Unterpunkte Ort 1 bis 3 . Wenn man Auf einen Unterpunkt klickt z.B Ort 1 dann erhält man die Informationen, Bilder und Downloads...

Und da das sonst zu einem Riesen Chaos führen würde finde ich die Akkordeon funktion sehr Praktisch

HI

das geht schon, aber du musst die Klassennamen ändern (toggler und accordeon sind Standard). Dafür gibt es extra zwei Felder. Im Beschreibungstext der Felder steht das auch, also einfach lesen...

Sebastian

Welche ich vorher im CSS hinterlegen muss? oder hab ich da Freiewahl und kann da einfach festlegen das teil heißt jezt z.B element1 und der nächste Hauptpunkt element 2?

Sorry für die Frage aber so ganz erschließt sich das für mich noch nicht!

HI

du musst dazu dem Javascript (Template: moo_***.tpl) die Klassen auch noch beibringen, wenn ich mich nicht irre. Aber mit CSS hat das alles bestimmt nichts zu tun.

Sebastian

Hallo Acta,

habe das schon ein mal bei einer Seite gemacht. Du musst ein neues JavaScript-Template anlegen mit diesem Code:

Code:

---

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
        this.accordion = new Accordion('.toggler','.element',
        {alwaysHide: true,
        start: 'all-close',
        duration: 400,
        transition: Fx.Transitions.quartOut},
        $('accordion')).addEvent('onBackground', function(toggler,element)
{
        element.setStyle('height',element.offsetHeight);
});
$$('.element').each(function(element,i){
                new Accordion('.nestedToggler','.nestedElement',
                {alwaysHide: true,
                start: 'all-close',
                duration: 400,
                transition: Fx.Transitions.quartOut
                },element).addEvent('onActive', function(toggler,element){
                toggler.getParent().setStyle('height','auto');
        });
});

});
//--><!]]>
</script>

---

Im Seitenlayout musst du dann bei Mootools JavaScript das Template auswählen. Leider funktioniert dann das Anlegen von verschachtelten Akkordions nicht als Content-Element. Dafür musst du eigenen HTML-Code einfügen. Das Beispiel von mir kannst du hier sehen: http://www.highlandbeat.com/index.php/texte.html

Grüße, Max

Danke dir... ich hab es jetzt über die Inhaltselemente Reiter gelöst und die per css meinen Akordeons angepasst...

Werde deinen Hinweis im Hinterkopf behalten und sobald als Möglich mal auf meiner Testumgebung ausprobieren

Ist es möglich die Akkordeons auch so zu steuern das sich ein geöffnetes Akkordeon nicht automatisch schließt wenn ich ein zweites öffne?

Also so eine "on-click" funktion wäre nicht schlecht.


Nach dem Vorbild des Backends um das nochmal zu verdeutlichen.
Ich biete Informationen an die Eventuell auch verglichen werden sollen.

Das ist ja leider bei den Standart Akkordeons nicht möglich da diese zuklappen sobald man ein anderes geöffnet hat!

Kennt jemand eine Lösung für ein öffnen uns Schließen der Akkordeons per MausklicK?

Hallo Max,

ich habe bei meiner Seite nun deinen Java Code eingebaut. Es funktioniert zwar, aber nun ist jedes Accordeon ausgeklappt. Ich möchte aber, dass erst dann ausgeklappt wird, wenn man auf den Titel klickt.

Gibt's dazu ne Lösung?

im entsprechenden Seitenlayout als Mootools-Template moo_close_all auswählen

Das funktioniert aber nicht, denn ich möchte ja folgendes haben.

Ich habe ein Accordion mit Start und Ende. Dazwischen habe ich das Element "Include Einstellungen -> Artikel"

In diesem Artikel habe ich wieder einige Accordions mit Start und Ende und dazwischen habe ich das Element "Downloads"

Ich möchte also über diese Accordions noch einen Accordion haben.

Denn wenn ich moo_close_all auswähle sehe ich zwar alle Accordions aber das Element Downloads wird nicht geöffnet. Wenn ich darauf klicke werden die Accordions geschlossen und man sieht nur ganz kurz die downloads.

Auch wenn diese Diskussion alt ist: ich brauchte ebenfalls ein verschachteltes Akkordeon und bin zu einer etwas anderen/einfacheren Lösung gekommen als Max (in Contao 2.9.5). Siehe Wiki.

Super hilfreicher Wiki-Eintrag. Vielen Dank!

Zitat:

---

Zitat von Webkrebse

Super hilfreicher Wiki-Eintrag.

---

Danke. Beachte aber bitte, dass seit 2.11 (oder war es schon in 2.10?) der mit Contao gelieferte Akkordeon JS Code verbessert wurde (zumindest "more accessible", Details muss ich selbst erst noch mal herausfinden)! Sobald ich dazu Zeit habe, werde ich diese Verbesserungen auch ins Wiki (und meine Erweiterung) übernehmen. In der Zwischenzeit müsstest Du selbst mal vergleichen, was sich geändert hat.

LG , Georg

Moin, moin,
unter http://de.contaowiki.org/Akkordeons_verschachteln ist schön erklärt, wie man unter 2.9 verschachtelte Akkordeons erzeugen kann. Unter 2.10 sieht dies wegen des anderen, zu verwendenden Templates etwas anders aus. Deswegen habe ich mir das dazugehörige 2.10-moo_accordion.tpl genommen und den Code wie folgt geändert:

Code:

---

<script>
window.addEvent('domready', function() {
  new Accordion($$('div.toggler'), $$('div.accordion'), {
  …
  });
  new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'), {
  …
  });
});
</script>

---

Dieses habe ich als moo_accordion_nested.tpl im template-Ordner abgespeichert und im entsprechenden Seiten-Layout eingebunden.
Leider führt dies nun wahrscheinlich zu einem Scriptfehler (zusätzliche Class-Angaben fehlen). Es passiert jetzt gar nichts mehr. (s. http://www.meeresschutz.info/index.p...cg_archiv.html)

Wo liegt der Fehler im Script?

Gruß
bees2

Moin, moin,
hab nun mal folgendes gemacht:
moo_accordion.html5 neu im Template-Ordner erstellt, umbenannt in moo_accordion_outer.html5, nur die rotmarkierten Stellen im Code wie folgt geändert:

Code:

---

<script>
window.addEvent('domready', function() {
  new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'), {
    opacity: false,
    alwaysHide: true,
    onActive: function(toggler, elem) {
      elem.setProperty('aria-hidden', 'false');
      toggler.addClass('active');
      toggler.getNext('div').setStyle('visibility', 'visible').fade('in');
      toggler.setProperty('aria-expanded', 'true');
      return false;
    },
    onBackground: function(toggler, elem) {
      elem.setProperty('aria-hidden', 'true');
      toggler.removeClass('active');
      toggler.getNext('div').fade('out').setStyle('visibility', 'hidden');
      toggler.setProperty('aria-expanded', 'false');
      return false;
    }
  });
  $$('div.toggler_outer').each(function(elem) {
    elem.setProperty('role', 'tab');
    elem.setProperty('tabindex', 0);
    elem.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(elem) {
    elem.setProperty('role', 'tablist');
  });
  $$('div.accordion_outer').each(function(elem) {
    elem.setProperty('role', 'tabpanel');
  });
});
</script>

---

ein äußeres mit class='toggler_outer und accordion_outer', sowie zwei innere Standard-Akkordeons angelegt, im Seiten-Layout beide Templates moo_accordion_outer.html5 und moo_accordion.html5 eingebunden.

Leider funktionieren nur die zwei inneren, aber nicht das äußere Akkordeon. Binde ich nur das eine bzw. das andere Template ein, reagieren wenn nur die inneren.

toggler_outer müsste doch wenigstens funktionieren, wenn das moo_accordion.html5 nicht eingebunden ist.

Wo könnte die Lösung liegen??
Gruß
Bees2


PS: @Administrator: dieses Thema gehört besser mit in dieses Thema! Danke für's Verschieben!

[Moderation: Themen zusammengeführt. Danke für den Hinweis.]

Hallo,

so eine ähnliche Funktion bräuchte ich, um in Newselementen (die schon als Akkordeon funktionieren), einen Code anzeigen zum können:
Der Code soll verborgen sein, lediglich eine Zeile (mit Grafik) zum Öffnen und Code anzeigen, siehe angehängte Grafik.

ist sowas möglich, bzw. wie stell ich das am besten an?

Vielen Dank,

ToM