Contao Tipps

Akkordeon Modul: + Usability durch CSS

(Für TL ab 2.8 siehe weiteres auch hier)

Ohne CSS-Formatierung sieht der Akkordeon-Effekt nicht gerade sehr benutzerfreundlich aus, da es sich bei den Titeln (class:toggler) nicht um Links handelt.

Forum Beitrag dazu:
Hier ein kleiner CSS-Workaraound mit grosser Wirkung:
Folgendes CSS und ein kleines Bild schaffen Abhilfe:

.toggler{
    font-weight:bold;
    color:#4F9100;
    background:transparent url(ico_plus.gif) left center no-repeat;
    border-bottom:1px #E7E6D3 solid;
    padding-left:21px;
    margin-top:7px;
    cursor:pointer;
    cursor:hand;
}
div.accordion{
    border-left:1px #E7E6D3 solid;
    padding-left:5px;
    margin-left:4px;
}

Die Farben und der Pfad müssen natürlich noch angepasst werden.

Erweiterung Minus-Grafik

Da mootools die "toggler" class nicht ändert vom Namen wenn der Abschnitt geöffnet wird, war es über CSS nicht möglich, die Grafik zu ändern z.B. zu einem Minus-Symbol. Dazu kann man aber die mootools Templates nutzen.

Anregung / Übersetzung aus dem englischem Forumbeitrag.
In meinem Fall habe ich die "moo_modify_foreground.tpl" in das "/templates" Verzeichnis kopiert und in "onActive" und "onBackground" je eine Zeile ergänzt. Diese bewirken, das eine Klasse "active" gesetzt bzw. wieder gelöscht wird. Damit ist es nun per CSS möglich darauf zu reagieren. (eine icon_minus.gif muss auch angelegt werden)
Hier nun die Code-Listings dazu:

moo_modify_foreground.tpl

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

		onActive: function(toggler, i)
		{
			toggler.getFirst() ? toggler.getFirst().setStyle('color', '#000000') : toggler.setStyle('color', '#000000');
			toggler.getFirst() ? toggler.getFirst().toggler.addClass('active') : toggler.addClass('active');
		},

		onBackground: function(toggler, i)
		{
			toggler.getFirst() ? toggler.getFirst().setStyle('color', '#a84204') : toggler.setStyle('color', '#a84204');
			toggler.getFirst() ? toggler.getFirst().toggler.removeClass('active') : toggler.removeClass('active');
		}
	});
});
//--><!]]>
</script>

CSS Erweiterung zu oben

.toggler.active {
    background:transparent url(minus.gif) left center no-repeat;
}

Akkordeon mit MouseOver öffnen

Akkordeons öffnen mit MouseOver und nicht wenn man nur draufklickt geht wie folgt mittels eines erweiterten Templates:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
 
//make the accordion
var accordion = new Accordion($$('.toggler'),$$('.accordion'), {
	opacity: 0,
        display: false,
	alwaysHide: true,
 
});
 
//make it open on hover
$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });
 
 
 
//--><!]]>
</script>

Quelle: Forum
nach Hinweis auf DavidWalsh Blog Site