Accordion extended

Aus Contao Community Documentation

MsgError.png Unvollständiger Artikel: dieser Artikel ist noch nicht sauber bearbeitet.

Bitte erweitere ihn und entferne erst anschliessend diesen Hinweis.

betrifft
TYPOlight Version ab 2.8


Accordion mit Active/Hover-Effekten

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

Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich überlege gerade warum Contao Developer einen Hangout mit Bildübertragung machen... abgesehen von TheTril sind wir da alle relativ hässliche Typen wo Audio deutlich reichen würde. *g*

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge