Accordion öffnen mit MouseOver Version 2.10.3 / Gelöst?

**latscheli** · 30.12.2011, 11:25

Hallo Community,

ich hoffe ihr hattet alle geruhsame Weihnachtsfeiertage.

Ich habe folgendes Problem: Ich möchte gerne, dass das Accordion anstatt bei Klick, sich automatisch bei MouseOver öffnet. Ich habe auch einige tolle Erläuterungen von BugBuster http://www.contao.glen-langer.de/Akkordeon_Modul.html und anderen gefunden. Da ich aber so gut wie keine Kenntnisse in JS habe und die gefundenen Erklärungen sich auf ältere Contao-Versionen beziehen, weiß ich nicht mehr weiter.

Die Template Dateien von Contao haben jetzt anstatt die .tpl die Endung .html5. Wenn ich die Erklärungen richtig verstanden habe, muss ich die bei BugBuster genannte Erweiterung in die Datei moo_accordion.html5 einfügen. Kann mir bitte jemand sagen an genau welcher Stelle diese Änderungen rein müssen?

HTML-Code:

<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>

Vielen Dank schon im Voraus für Eure Hilfe.

Viele Grüße

**latscheli** · 30.12.2011, 13:37

Ich habe einfach rumprobiert und es geht jetzt. Hoffentlich habe ich keine Fehler gemacht, falls deshalb noch einmal ein versierter Entwickler drüberschauen könnte?

ich habe jetzt einfach das Template moo_accordion.html5 folgendermaßen geändert:

Code:

$$('div.toggler').each(function(elem) {
    elem.setProperty('role', 'tab');
    elem.setProperty('tabindex', 0);
    elem.addEvents({
      'keypress': function(event) {
        if (event.code == 13) {
          this.fireEvent('click');
        }
      },
      'focus': function() {
        this.addClass('hover');
      },
      'blur': function() {
        this.removeClass('hover');
      },

      'mouseenter': function() {
        this.addClass('hover');
    this.fireEvent('click');
      },
      'mouseleave': function() {
        this.removeClass('hover');
      }
    });

Die oben genannte Variablendefinition habe ich nirgends untergebracht, aber bei mir funktioniert es jetzt.

Viele Grüße