Akkordeons verschachteln 2

Aus Contao Community Documentation

betrifft
Contao Version 3.1.5

Verschachtelte Akkordeons

Akkordeons-verschachteln-2.png

Ziel

Akkordeons innerhalb von Akkordeons darstellen.

Einschränkung

Bis zu 2 Ebenen. (Weitere Ebenen durch Templateerweiterung möglich.)

Umsetzung

MooTools

Template moo_accordion_nested.html5 oder -.xhtml erstellen und im Layout anstatt moo_accordion auswählen. Funktioniert auch bei nicht verschachtelten Akkordeons.

jQuery

Template j_accordion_nested... Sonst wie bei MooTools.

Näheres

Für das Akkordeon in der 2. Ebene muss im Template eine neue Instanz (Javascript) erzeugt werden.

Das Template

Der erste Block des original Templates (Instantiierung) wurde dubliziert, wobei jeweils in der ersten Zeile die Zielelemente (CSS-Selektoren) verändert wurden, so dass jeweils das äußere bzw. das innere Akkordeon (HTML-Code) angesprochen wird.

MooTools

<script>
  (function($) {
    window.addEvent('domready', function() {
 
      // Level 1
      new Fx.Accordion($$('div.mod_article > .ce_accordion > div.toggler'), $$('div.mod_article > .ce_accordion > div.accordion'), {
        display: 0,       // first element open on start
        opacity: false,   // no opacity animation
        alwaysHide: true, // possibility to close all accordions
        onActive: function(tog, el) {
          el.setProperty('aria-hidden', 'false');
          tog.addClass('active');
          tog.getNext('div').fade('in');
          tog.setProperty('aria-expanded', 'true');
          return false;
        },
        onBackground: function(tog, el) {
          el.setProperty('aria-hidden', 'true');
          tog.removeClass('active');
          tog.getNext('div').fade('out');
          tog.setProperty('aria-expanded', 'false');
          return false;
        }
      });
 
      // Level 2
      new Fx.Accordion($$('.ce_accordion .ce_accordion div.toggler'), $$('.ce_accordion .ce_accordion div.accordion'), {
        display: -1, // no element open on start
        opacity: false,
        alwaysHide: true,
        onActive: function(tog, el) {
          el.setProperty('aria-hidden', 'false');
          tog.addClass('active');
          tog.getNext('div').fade('in');
          tog.setProperty('aria-expanded', 'true');
          return false;
        },
        onBackground: function(tog, el) {
          el.setProperty('aria-hidden', 'true');
          tog.removeClass('active');
          tog.getNext('div').fade('out');
          tog.setProperty('aria-expanded', 'false');
          return false;
        }
      });
 
      // Accessibility
      $$('div.toggler').each(function(el) {
        el.setProperty('role', 'tab');
        el.setProperty('tabindex', 0);
        el.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');
          },
          'mouseleave': function() {
            this.removeClass('hover');
          }
        });
      });
      $$('div.ce_accordion').each(function(el) {
        el.setProperty('role', 'tablist');
      });
      $$('div.accordion').each(function(el) {
        el.setProperty('role', 'tabpanel');
      });
 
    });
  })(document.id);
</script>

jQuery

Das jQuery-Template wurde noch nicht erarbeitet.

"Wichtig"


Formatierung

Hier ein wenig CSS für den ersten Testlauf.

/* ... Accordion ...
-------------------------------------------------------------------------------------------------*/
.toggler {
  cursor: pointer;
  margin: 0;
  padding: 10px;
  color: #fff;
  background-image: linear-gradient(to bottom, #fff 0%, #000 50%);
}
.accordion .toggler {
  background-image: linear-gradient(to bottom, #fff 0%, #666 50%);
}
.ce_accordion {
  background: #eee;
}
.ce_accordion .ce_accordion {
  background: #ccc;
  margin-left: 50px;
}
/* ... Accordion ... END
-------------------------------------------------------------------------------------------------*/

--Andreas Burg 07:02, 30. Nov. 2013 (CET)

Ansichten
Meine Werkzeuge

Contao Community Documentation

Meiner Meinung nach, sollten zu kleine Webspacepakete entweder Webspaß-Pakete (man beachte die Ironie) oder Horsting-Pakete heißen!

Sascha Müller
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge