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

[Harry]

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

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
    this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'), 
    {
        display: false,
        alwaysHide: true,
        opacity: false,

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

        onBackground: function(toggler, i)
        {
            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:

.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

[psren]

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

[shabby]

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

[chr.flader]

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

[chr.flader]

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

[vox]

Oder kann man irgendwie ein bestimmtes Akkordeon-Tab öffnen lassen?

[minstyle]

Perfekt. Danke Harry!

[Chris87]

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.

[xchs]

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?

[Psi]

http://de.contaowiki.org/Accordion_extended

[birksilas]

vielen dank harry! das hab ich gesucht

[rednex]

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

[tblumrich]

Die Variante aus dem Wiki hast du auch mal ausprobiert?

[rednex]

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

[macjag]

*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

[rednex]

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"

[macjag]

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

[cheche]

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

[H.C.]

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.

[joe]

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.

[soweit_ok]

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.

[H.C.]

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...

[H.C.]

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.

[dieselboy]

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

[soweit_ok]

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.

[H.C.]

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.

[soweit_ok]

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.

[H.C.]

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.

[sadara]

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

[Vollpfosten]

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

[sadara]

......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

[SakurAni]

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

[Harry]

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