Accordion mit Menü

Für ein aktuelles Projekt ist es nötig den Inhalt per Accordion bereitzustellen. Das Skript dürfte bekannt sein. Beim Klick auf die Überschrift öffnet sich ein Bereich und der Inhalt wird sichtbar.
Ein Anforderung war nun das es zusätzlich auf der linken Spalte ein Menü gibt mit den Überschriften. Bei Klick auf das Menü soll sich das entsprechende Accordion öffnen.

Ausgangslage

Wie üblich verwende ich das Contao CMS. Standardmäßig wird dort MooTools eingesetzt. Die Grundfunktion eines Accordion wird bereits mitgeliefert.

Umsetzung

Wir kopieren uns das moo_accordion.tpl im Backendbereich ins /template Verzeichnis. Anschließend öffnen wir, mit einem beliebigen Editor (zB Notepad++), diese Datei. Nun fügen wir folgenden Code ein.

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
  var anchor = document.location.hash.substring(1);
	var accIndex = -1;
  var found = false;

  var myAccordion = new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
    opacity: false,
    display: accIndex,
    alwaysHide: true
  });

  $$('div.accmenu a').each(function(item, index) {
    //create click event for navigation
    $($(item.hash.substring(1))).addEvent('click', function() {
      myAccordion.display(index);
    });
  });
});
//--><!]]>
</script>

Erklärung des JavaScriptes

Ich mache nichts weiter als ein div mit der Klasse accmenü auszulesen, hierbei werden nur die Links (a) berücksichtigt. Anschließend erstelle ich via addEvent ein Klick event. Via Index übergebe ich dem Accordion welches geöffnet werden soll.
Anmerkung: Das Menü muss der Reihenfolge des Accordions entsprechen ansonsten wird ein falsches geöffnet.

Anschließend bennen wir die Datei noch um, in meinem Fall auf moo_accordion_menu.tpl. Unter Themes -> Seitenlayout fügen wir das soeben angelegt Skript ein, damit dieses auch geladen wird.
Auf der entsprechenden Seite fügen wir auf der linken Spalte ein Textelement ein. In diesem befindet sich eine Liste (ul) welche die Accordion Überschrift enthält.
Wichtig: Zusätzlich definieren wir noch unter Experteneinstellung eine CSS Klasse namens accmenu. Ohne diese Klasse funktioniert das Skript nicht. Somit ergibt sich folgende HTML Struktur.

<code>
<div class="ce_text accmenu block">
<ul>
  <li><a href="http://domain.at/seite.html#name1>Überschrift 1</a></li>
  <li><a href="http://domain.at/seite.html#name2>Überschrift 2</a></li>
  <li><a href="http://domain.at/seite.html#name3>Überschrift 3</a></li>
  <li><a href="http://domain.at/seite.html#name4>Überschrift 4</a></li>
  <li><a href="http://domain.at/seite.html#name5>Überschrift 5</a></li>
</ul>
</div>
</code>

Die Überschriften des Accordions müssen das name Attribut beinhalten damit diese auch angesprochen werden können.

Das wars dann auch schon, nun sollte es möglich sein via Menü das Accordion zu öffnen.

schman.at