Ergebnis 1 bis 17 von 17

Thema: Akkordeons im Akkordeon

  1. #1
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.500

    Standard 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

  2. #2
    Contao-Urgestein Avatar von Sebastian
    Registriert seit
    19.06.2009.
    Ort
    Stuttgart
    Beiträge
    3.361

    Standard

    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
    Ich arbeite beim Linux-Systemhaus ETES in Stuttgart

  3. #3
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.500

    Standard

    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!

  4. #4
    Contao-Urgestein Avatar von Sebastian
    Registriert seit
    19.06.2009.
    Ort
    Stuttgart
    Beiträge
    3.361

    Standard

    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
    Ich arbeite beim Linux-Systemhaus ETES in Stuttgart

  5. #5
    Contao-Nutzer
    Registriert seit
    29.07.2009.
    Ort
    Lübeck
    Beiträge
    20

    Standard

    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

  6. #6
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.500

    Standard

    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

  7. #7
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.500

    Standard

    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!
    Geändert von Acta (28.08.2009 um 09:05 Uhr)

  8. #8
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.500

    Standard

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

  9. #9
    Alter Contao-Hase
    Registriert seit
    20.06.2009.
    Ort
    Graz (Austria)
    Beiträge
    1.455

    Standard

    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?
    LG, Andi

  10. #10
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.780
    Partner-ID
    634

    Standard

    im entsprechenden Seitenlayout als Mootools-Template moo_close_all auswählen

  11. #11
    Alter Contao-Hase
    Registriert seit
    20.06.2009.
    Ort
    Graz (Austria)
    Beiträge
    1.455

    Standard

    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.
    LG, Andi

  12. #12
    Contao-Fan Avatar von deerwood
    Registriert seit
    24.11.2009.
    Ort
    Hamburg
    Beiträge
    344

    Standard

    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.
    Geändert von deerwood (15.06.2011 um 02:55 Uhr) Grund: WiKi Artikel umbenannt

  13. #13
    Contao-Nutzer Avatar von Webkrebse
    Registriert seit
    16.04.2010.
    Ort
    Bruchköbel
    Beiträge
    77

    Standard

    Super hilfreicher Wiki-Eintrag. Vielen Dank!
    Internetagentur für kreative Webseiten - webkrebse.com

  14. #14
    Contao-Fan Avatar von deerwood
    Registriert seit
    24.11.2009.
    Ort
    Hamburg
    Beiträge
    344

    Standard

    Zitat Zitat von Webkrebse Beitrag anzeigen
    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

  15. #15
    Contao-Nutzer
    Registriert seit
    25.08.2011.
    Beiträge
    59

    Standard Verschachtelte Akkordeons unter 2.10

    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

  16. #16
    Contao-Nutzer
    Registriert seit
    25.08.2011.
    Beiträge
    59

    Standard

    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.]
    Geändert von xchs (30.05.2012 um 15:00 Uhr)

  17. #17
    Contao-Fan Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    436

    Standard

    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
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Nightwing (24.03.2014 um 16:59 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Akkordeon einrichten?
    Von Ralf.Schmitt im Forum Allgemeine Inhaltselemente
    Antworten: 6
    Letzter Beitrag: 08.11.2014, 22:36
  2. Akkordeon horizontal
    Von mattes im Forum Layout / Templates / Holy Grail
    Antworten: 1
    Letzter Beitrag: 03.08.2010, 09:19
  3. akkordeon
    Von karo im Forum Allgemeine Inhaltselemente
    Antworten: 6
    Letzter Beitrag: 27.11.2009, 14:14
  4. Modern Green und Akkordeons
    Von LutzWinkler im Forum Allgemeine Inhaltselemente
    Antworten: 4
    Letzter Beitrag: 01.11.2009, 17:48
  5. FAQ mit Akkordeon
    Von derAries im Forum Nachrichten/Events/FAQ
    Antworten: 3
    Letzter Beitrag: 10.08.2009, 20:13

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •