Liste der Anhänge anzeigen (Anzahl: 1)
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'),
{
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:
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
[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
