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
Accordion: Toggler mit zusätzlicher Klasse active bzw. inactive
Zitieren
Zitat von Chris87
