Accordion extended: Unterschied zwischen den Versionen

Version vom 23. Juni 2010, 16:57 Uhr

Accordion mit Active/Hover-Effekten

Achtung: Dieser Artikel befindet sich noch im Aufbau!

Mit ein paar kleinen Tricks kann man das Accordion von Contao dazu bringen, dass es je nach Status die CSS-Klassen hover und active setzt. Damit können Beispielsweise Effekte beim Überfahren mit der Maus oder verschiedene Ansichten für ein auf/zu geklapptes Akkordion realisiert werden.

Als erstes muss dazu das Javascript-Template moo_accordion.tpl bearbeitet werden:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
  new Accordion($$('div.toggler'), $$('div.accordion'), {
    alwaysHide: true,
    opacity: false,
    display: -1, // -1, alle Akkordions sind am Anfang eingeklappt
    onActive: function(toggler,elem) {
		toggler.addClass('active');
    },
    onBackground: function(toggler,elem) {
		toggler.removeClass('active');
    }
  });
  $$('div.toggler').each(function(elem){
	elem.addEvents({
		'mouseenter': function(){
			elem.addClass('hover');
		},
		'mouseleave': function(){
			elem.removeClass('hover');
		}
	});
  });
});
//--><!]]>
</script>

Durch dieses Template erhält das Toggler-Div zusätzlich:

• Die Klasse hover beim überfahren mit der Maus
• Die Klasse active wenn das Element ausgeklappt ist

erstellt von --Psi, 4ward.media