Ergebnis 1 bis 33 von 33

Thema: Accordion: Toggler mit zusätzlicher Klasse active bzw. inactive

  1. #1
    Gesperrt
    Registriert seit
    15.06.2009.
    Ort
    Embu, Kenya
    Beiträge
    125
    Partner-ID
    254

    Standard Accordion: Toggler mit zusätzlicher Klasse active bzw. inactive

    Hallo zusammen,

    basierend auf den beiden Themen
    http://www.contao-community.de/showt...asse-erweitern
    http://www.contao-community.de/showt...0556#post40556
    hier zusammengefasst, wie man dem Toggler des Accordions eine Klasse zuweisen kann, um ein geöffnetes Accordion anders aussehen zu lassen als ein geschlossenes Accordion.

    1. Das folgende Skript in den Ordner "templates" (bzw. Unterordner) hochladen
    PHP-Code:
    <script type="text/javascript">
    <!--
    //--><![CDATA[//><!--
    window.addEvent('domready', function()
    {
        
    this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'), 
        {
            
    displayfalse,
            
    alwaysHidetrue,
            
    opacityfalse,

            
    onActive: function(toggleri)
            {
                
    toggler.getFirst() ? toggler.addClass('active') : toggler.addClass('active');
                
    toggler.getFirst() ? toggler.removeClass('inactive') : toggler.removeClass('inactive');
            },

            
    onBackground: function(toggleri)
            {
                
    toggler.getFirst() ? toggler.removeClass('active') : toggler.removeClass('active');
                
    toggler.getFirst() ? toggler.addClass('inactive') : toggler.addClass('inactive');
            }
        });
    });
    //--><!]]>
    </script> 
    2. Das Skript im Seitenlayout aktivieren

    3. Accordion und Toggler per CSS stylen, z. B. per:
    Code:
    .ce_accordion{margin-bottom:5px;}
    .ce_accordion .toggler{padding:3px 0 3px 22px;background-color:#b1becf;background-image:url("tl_files/themes/mytheme/accordion_closed.gif");background-repeat:no-repeat;color:#354661;-moz-border-radius: 5px;-webkit-border-radius: 5px;cursor:pointer;background-position: 6px center;}
    .ce_accordion .toggler.active{background-image:url("tl_files/themes/mytheme/accordion_open.gif");}
    .toggler_first{color:#a84204;}
    .toggler_first:hover{text-decoration:underline;color:#a84204;cursor:pointer;}
    .accordion div{padding:6px 0 8px;line-height:16px;}
    Im Anhang findet Ihr ein Paket mit zwei Skripten: Beim Seitenaufruf sind alle Accordions geschlossen oder das erste Accordion ist geöffnet. Außerdem habe ich noch die zwei in den Styles erwähnten Grafiken dazugelegt.

    Gruß
    Harry
    Angehängte Dateien Angehängte Dateien

  2. #2
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    Super, dankeschön.
    Genau was ich eben gebraucht hatte...

  3. #3
    Contao-Nutzer
    Registriert seit
    08.06.2010.
    Beiträge
    26

    Standard

    Dito!!! Vielen Dank für deine Mühe Harry.

  4. #4
    Contao-Fan Avatar von chr.flader
    Registriert seit
    03.07.2009.
    Beiträge
    801

    Standard

    Hi,

    was muss ich tun, damit man auch 2 Akkordeoneinträge geöffnet haben kann?

    Also nicht das der eine zu geht, wenn der andere angeklickt wird?

    Christian

  5. #5
    Contao-Fan Avatar von chr.flader
    Registriert seit
    03.07.2009.
    Beiträge
    801

    Standard

    Hat keiner einen Tipp oder habe ich das nur nicht ausführlich erklärt?!

  6. #6
    Contao-Nutzer
    Registriert seit
    05.08.2009.
    Beiträge
    119

    Standard

    Oder kann man irgendwie ein bestimmtes Akkordeon-Tab öffnen lassen?
    Grüße, Alex

  7. #7
    Contao-Fan
    Registriert seit
    26.06.2009.
    Beiträge
    266

    Daumen hoch

    Perfekt. Danke Harry!

  8. #8
    Contao-Fan
    Registriert seit
    08.12.2009.
    Beiträge
    719

    Standard

    Die Templates moo_accordion_closed.tpl und moo_accordion_open.tpl haben bei mir keine Auswirkung. Das erste Akkordeon ist trotzdem ausgeklappt. Habe Version 2.9.1.

    Ich möchte das alle Akkordeons geschlossen sind.
    Geändert von Chris87 (29.09.2010 um 15:45 Uhr)

  9. #9
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.583
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Chris87 Beitrag anzeigen
    Die Templates moo_accordion_closed.tpl und moo_accordion_open.tpl haben bei mir keine Auswirkung. Das erste Akkordeon ist trotzdem ausgeklappt. Habe Version 2.9.1.

    Ich möchte das alle Akkordeons geschlossen sind.
    Hast Du denn das betreffende MooTools-Template auch in Deinem (Standard-)Seitenlayout ausgewählt?
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  10. #10
    AG Core-Entwicklung Avatar von Psi
    Registriert seit
    19.06.2009.
    Ort
    Mittelfranken
    Beiträge
    930
    Partner-ID
    5583
    User beschenken
    Wunschliste

  11. #11
    Contao-Nutzer
    Registriert seit
    12.03.2010.
    Beiträge
    79

    Standard

    vielen dank harry! das hab ich gesucht

  12. #12
    Contao-Fan
    Registriert seit
    03.10.2010.
    Beiträge
    365

    Standard

    Danke Harry! sowas hab auch ich gesucht.

    PS: Könnte mir jemand aushelfen? Das mit dem aktiv/inaktiv klappt wunderbar, aber irgendwie krieg ich keinen "hover" zustande... und das .toggler_first .toggler_first:hover leuchtet mir irgendwie auch nicht ein... Falls wer Lust verspürt -> PM

  13. #13
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Die Variante aus dem Wiki hast du auch mal ausprobiert?
    blucomp | Webdesign & Onlinelösungen

  14. #14
    Contao-Fan
    Registriert seit
    03.10.2010.
    Beiträge
    365

    Standard

    Zitat Zitat von tblumrich Beitrag anzeigen
    Die Variante aus dem Wiki hast du auch mal ausprobiert?
    nein noch nicht, kämpfe gerade noch mit mir... (bin nicht sooo bewandert mit dem ganzen...)

    *Edit* damit hats geklappt, also danke an beide Autoren
    Geändert von rednex (17.12.2010 um 18:10 Uhr)

  15. #15
    Contao-Nutzer
    Registriert seit
    23.03.2010.
    Ort
    München
    Beiträge
    120

    Standard Frage mit hover

    *Edit* damit hats geklappt, also danke an beide Autoren [/QUOTE]

    Hallo rednex,
    kannst Du vielleicht kurz darstellen wie Du es mit dem hover geschafft hast? aktiv/inaktiv geht bei mir aber was muss noch gemacht werden?

    Vielen Dank im Voraus.
    macjag

  16. #16
    Contao-Fan
    Registriert seit
    03.10.2010.
    Beiträge
    365

    Standard

    Zitat Zitat von macjag Beitrag anzeigen

    Hallo rednex,
    kannst Du vielleicht kurz darstellen wie Du es mit dem hover geschafft hast? aktiv/inaktiv geht bei mir aber was muss noch gemacht werden?

    Vielen Dank im Voraus.
    macjag
    Ich hab einfach die "Vorlage" aus dem Wiki genommen und meine CSS meinen Wünschen entsprechend angepasst. Klappte auf anhieb wie gewünscht. Glaube in dem obigen Beispiel von Harry, gibts kein "Hover", oder ich versteh einfach nur nicht "wie"
    Geändert von rednex (17.12.2010 um 19:14 Uhr)

  17. #17
    Contao-Nutzer
    Registriert seit
    23.03.2010.
    Ort
    München
    Beiträge
    120

    Daumen hoch

    hallo rednex,
    herzlichen Dank für Deine Antwort:

    Hab es jetzt über das zusätzliche Script (für aktiv/inaktiv) und toggle:hover im CSS mal versucht und gelöst.

    Schönen Abend
    macjag

  18. #18
    Contao-Nutzer
    Registriert seit
    08.03.2010.
    Beiträge
    105

    Standard

    Danke für die Beispiele! Funktionieren soweit aber nicht beim IE zb. Version 8.
    Hat jemand einen Tipp?

    Falsch: Ich funktioniere nicht, zu früh geschossen. Alles Bestens auch im IE ;-)

    Lg
    cheche
    Geändert von cheche (22.12.2010 um 14:31 Uhr)

  19. #19
    Contao-Nutzer
    Registriert seit
    24.09.2009.
    Beiträge
    65

    Standard

    hat jemand einen Tip wie ich die active klasse inactiv mache?
    also wenn einen Reiter ausgeklappt habe darf er nicht anklickbar sein... wird ein
    anderer Reiter angeklickt dann wieder ja und der angeklickte ist nicht anklickbar...
    Warum?
    Ich möchte verhindern das alle Reiter geschlossen werden können.

    ich hoffe einer hats verstanden was ich gerne möchte...

    vielen Dank
    H.C.

  20. #20
    Contao-Fan Avatar von joe
    Registriert seit
    20.06.2009.
    Ort
    Lüneburg
    Beiträge
    687
    User beschenken
    Wunschliste

    Standard

    Du musst alwayshide auf false stellen.

    Hier der Auszug aus der Mootools Doku:

    alwaysHide - (boolean: defaults to false) If set to true, it will be possible to close all displayable elements. Otherwise, one will remain open at all time.
    Edit

    bzw. kannst du es einfach als option entfernen da es als standart auf false steht.

  21. #21
    Gesperrt
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    Wer sich in noch in diesen inzwischen schon recht alten Thread verläuft, könnte sich auch mal dies anschauen ...
    http://www.contao.org/erweiterungsli...ordion.de.html
    Und auch den Forum-Thread dazu. Diese Erweiterung kann nämlich noch viel mehr, als aus der Beschreibung im ER hervorgeht. Sie kann ebenso wie gewohnt auch für ganz "normale" Accordions eingesetzt werden. Die häufig gewünschte Toggler-Formatierung "active,hover" funktioniert natürlich, vor allem aber ist u. a. endlich mal das bekannte nervige Formular-Problem und das Problem zugeklappter Accordions nach der Rückkehr von dort verfolgten Links wirklich behoben und funktioniert sehr elegant. Ebenso wird verhindert, dass bei unten platzierten Accordions längere Inhalte aus dem Viewport rutschen. Am besten selber probieren und sich dann freuen.

  22. #22
    Contao-Nutzer
    Registriert seit
    24.09.2009.
    Beiträge
    65

    Standard

    hi Joe,
    super danke..., wenn ich jetzt noch das nervige geblitze
    am Anfang von dem Inhalt (IE) wegbekommen würde isses perfekt...
    aber man kann halt nicht alles haben.

    vg.
    H.C.

    ich schau mir mal das andere accordeon an, danke...

  23. #23
    Contao-Nutzer
    Registriert seit
    24.09.2009.
    Beiträge
    65

    Standard

    hi,
    ich hoffe hier schaut nochmal jemand vorbei...
    wenn das Akkordeon geöffnet ist, möchte ich gerne das
    die active Klasse inaktiv ist und kein a:hover hat, geht das?

    vielen Dank
    g.a.B.
    H.C.

  24. #24
    Contao-Nutzer
    Registriert seit
    28.12.2009.
    Ort
    Dresden
    Beiträge
    206

    Standard

    Hallo H.C.,

    die Konfiguration des Akkordeon lässt sich relativ einfach anpassen. Schau mal, hier wird erklärt wie das Akkordion funktioniert.

    Viele Grüße
    Daniel

  25. #25
    Gesperrt
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    Zitat Zitat von H.C. Beitrag anzeigen
    wenn das Akkordeon geöffnet ist, möchte ich gerne das
    die active Klasse inaktiv ist und kein a:hover hat, geht das?
    Na klar geht das. Dafür weist Du einfach im CSS .ce_accordion div.active den entsprechenden Attributen dieselben Werte zu wie dem Normalzustand bei .ce_accordion div.toggler. Und falls Du auch bei hover keine Veränderung haben willst, dann eben auch bei der im Template vergebenen oder der hover-Pseudoklasse dasselbe. Bzw. überall garnichts reinsetzen außer in der Klasse toggler, dann passiert da auch nichts.

  26. #26
    Contao-Nutzer
    Registriert seit
    24.09.2009.
    Beiträge
    65

    Standard

    moin,
    danke für Eure Hilfe, so einfach isses dann doch nicht (jedenfalls für mich oder ich hab ein Knoten im Kopf).
    Ich dachte da vllt. an eine .trail klasse da ja die anderen Reiter ja nen a:hover haben sollten
    so schalte ich ja alle ab.

    Reiter1 -offen - inactive (.ce_accordion .toggler.active) sollte kein a:hover haben
    Reiter2 - geschlossen - active (.ce_accordion .toggler,.ce_accordion .toggler.hover) mit a:hover
    Reiter3 - geschlossen - active (.ce_accordion .toggler,.ce_accordion .toggler.hover) mit a:hover

    und dann natürlich der wechsel ist 2 inactive muss 1 active sein u.s.w.

    ich bekomm bloss den a:hover beim ersten Reiter nicht weg.

    g.a.B.
    H.C.

  27. #27
    Gesperrt
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    Offen gesagt verstehe ich Dein Problem nicht. Es ist ja immer nur ein Pane gleichzeitig offen und bei dem hat der Toggler dann jeweils automatisch die Klasse active und alle anderen geschlossenen haben die Klasse inactive. So ist es doch ein Leichtes, die benötigten Attributwerte zuzuweisen, bei mir funktioniert das jedenfalls völlig problemlos. Oder es wird bei Dir irgendwie von womöglich geerbten Zuweisungen überschrieben, guck doch am besten mal mit Firebug, was da CSS-mäßig genau auf Deiner Seite passiert.

  28. #28
    Contao-Nutzer
    Registriert seit
    24.09.2009.
    Beiträge
    65

    Standard

    Hi,
    dank Dir nochmal, denn Du hast mich drauf gebracht alles nochmal neu zu
    machen... und siehe da jetzt gehts.
    Keine Ahnung wodran das lag.

    g.a.B.
    H.C.

  29. #29
    Contao-Nutzer
    Registriert seit
    18.02.2010.
    Beiträge
    231

    Standard [gelöst] js-Fehler Accordion nicht definiert ?

    Hallo community,

    ich hab auf meiner Seite die zusätzlichen Akkordion-Klassen eingebaut. Lokal auf dem Rechner funktioniert alles einwandfrei, richtig super.
    Dann hab ich das Ganze auf den Server hochgeladen, und da funktioniert es nicht (??).
    Ich hab mehrere Akkordions auf der Seite, eigentlich sollte das erste aufgeklappt sein und die anderen zu. So ist es auch in der lokalen Version.

    Aber: die Akkordions sind alle aufgeklappt; und ich habe einen js-Fehler: Accordion nicht definiert.

    Das template ist angepasst. Woran kann denn DAS nun liegen ? <am-Kopf-kratz>.

    Hier ist der Link zu einer Seite mit Akkordions: http://www.caritas-himmelszelt.de/in...ueber-uns.html

    ....dankbar für jeden Tipp,

    Sadara
    Geändert von sadara (24.11.2011 um 01:21 Uhr)

  30. #30
    Contao-Fan
    Registriert seit
    07.07.2011.
    Ort
    Kiel
    Beiträge
    254
    User beschenken
    Wunschliste

    Standard

    Wenn ich deinen Link aufrufe (Chrome,FF,IE9) sind alle Accordions geschlossen und ein JS-Fehler wird auch nicht angezeigt ??

  31. #31
    Contao-Nutzer
    Registriert seit
    18.02.2010.
    Beiträge
    231

    Standard

    ......danke !!!!
    man sollte nicht mehr als 12 Stunden arbeiten.... die Konzentration lässt nach. Lösung: Cache im FF leeren, das wars (nicht das erste Mal, dass ich wie blöd Fehler suche, die gar nicht da sind..)

    so, jetzt schalte ich den Rechner aus.

    Sadara

  32. #32
    Contao-Nutzer
    Registriert seit
    17.11.2014.
    Ort
    Dresden
    Beiträge
    29

    Standard

    Hallo :-)

    Ich habe nach genau so etwas gesucht und würde es gern umsetzen.
    Am Anfang sollen alle Accordions geschlossen sein.

    Wo genau soll ich die moo_accordion_closed speichern? Unter templates liegen bei mir ce_text.html5 , fe_page.html5 usw.
    Und wie aktiviere ich dieses dann?

    DANKE

  33. #33
    Gesperrt
    Registriert seit
    15.06.2009.
    Ort
    Embu, Kenya
    Beiträge
    125
    Partner-ID
    254

    Standard

    Hallo SakurAni,

    ja, das Template legst Du in den Ordner "templates". Du bindest es anschließend im Seitenlayout ein. Dort wird das in den Ordner Templates gelegte Template nun unter "MooTools-Templates aufgeführt (solange Du den Anfang "moo_" nicht umbenennst). Haken davor, dann bindet Contao es ein.

    Gruß
    Harry

Aktive Benutzer

Aktive Benutzer

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

Ähnliche Themen

  1. Artikelnavigation - .active Klasse hinzufügen
    Von psren im Forum Layout / Templates / Holy Grail
    Antworten: 1
    Letzter Beitrag: 23.12.2010, 14:05
  2. Erste ausgegebene Überschrift mit zusätzlicher CSS Klasse?
    Von klodeckl im Forum Allgemeine Inhaltselemente
    Antworten: 2
    Letzter Beitrag: 11.12.2010, 15:43
  3. 3 Fragen zu Mootools Accordion/Toggler
    Von Stranger im Forum Layout / Templates / Holy Grail
    Antworten: 1
    Letzter Beitrag: 18.09.2010, 20:43
  4. Modul News CSS Klasse Active
    Von TheGeek im Forum Nachrichten/Events/FAQ
    Antworten: 2
    Letzter Beitrag: 01.12.2009, 17:03
  5. aktiver Toggler vom Accordion hervorheben
    Von schman im Forum Allgemeine Inhaltselemente
    Antworten: 1
    Letzter Beitrag: 01.10.2009, 13:45

Berechtigungen

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